ViliX64 ViliX64 - 1 month ago 15
Dart Question

Drawing to paragraph in Dart

I use GameLoop, which is depedent on Canvas, but works even without it. I have an array of chars which I draw to the paragraph almost every render frame. Lines are divided with

</br>
. Each time I check if there has been any changes in the array and if it needs to be redrawn.

Almost every char has got its class so it looks like this:
< span class="my_css_class">CHAR< /span>
(without spaces). So each char has it's css style.

The performance is great on the computing side, but rendering to the paragraph costs a lot of CPU usage. Is there a better way of how to render to paragraph with more efficiently?

The array is about 40x80 chars.

The code which renders the chars:

if(!Utility.isDuplicate()) {
StringBuffer sb = new StringBuffer();
for(int i = 0; i < HEIGHT; i++) {
for(int j = 0; j < WIDTH; j++) {
sb.write(array[i][j]);
}
sb.write("<br />");
}
querySelector("#main_paragraph").innerHtml = sb.toString();
}
}

Answer

Generally this can't be done using paragraphs as the whole HTML processing is too cumbersome and differs from browser to browser. Consider moving to canvas or some WebGL which should provide much better performance.

Comments