Geek Answers Handbook

Does it use multiple canvases more slowly than one?

If I'm going for fps, is it faster to use one large canvas and constantly redraw or have a bunch of small canvases and redraw less often, but use css3 for animation like this?

<canvas id="1" width="60px" height="60px"></canvas> <canvas id="2" width="60px" height="60px"></canvas> <canvas id="3" width="60px" height="60px"></canvas> <canvas id="4" width="60px" height="60px"></canvas>
+4
source share
2 answers

In theory, one canvas would actually be faster, assuming that you should program an algorithm that only redraws what you had to redraw, and the redrawing method occurred immediately *. The redraw method may be one of the most demanding actions that the browser can take; all the better.

However, the amount of code needed to run such a system is probably not worth the effort in the end. I would just stick with a few canvases for convenience and extensibility.

Here are some other optimization tricks I learned:

  • Cleaning the entire canvas does not take longer than cleaning a specific area, and in fact it can be faster than sorting through all the objects and cleaning them individually.

  • setTimeout best suited for animations where it is important to see each frame. requestAnimationFrame can skip frames on less capable machines.

  • Checking to see if an element is in a range before trying to draw it can save processor cycles, even though the canvas API is all the same.

* To cause a one-time change, you can set the display canvas to none , and then return to block after changing the context.

+2
source

Several canvases lead to better performance, because having only one canvas, it will be sluggish for browsers to draw multiple times on the same canvas than to have many canvases and perform the drawing task at the same time. Say, if you need to redraw on the same canvas, you will have to refresh the surface every time you draw something new. and obviously this would not be the case if you had several canvases, since you can always draw no matter what other canvases are up to.

KHAN PRODUCTIVITY

0
source

More articles:


All Articles