Why would it be faster to render using multiple canvas elements?

This video suggests that rendering using multiple canvas elements helps performance.

How does this work?

The idea was to use one for the player, one for the enemies, another for the background, though I really don't understand how could it be faster if you use more of the same thing.

Could someone clarify?

• Can you please provide a code example which demonstrates the effect? jsperf.com is good for providing performance-comparisons of javascript code to an online audience. – Philipp Dec 30 '14 at 15:42
• Actually I was just learning about it. Never tried it, but it is simple, you create a number of canvas elements in html then select them with getElementById, use their contexts separately for each player, enemy or whatever. Here is the video I learnt it: youtube.com/watch?v=fjVJ0Fju7tg This video gives an example. So my question is not about the code itself, but more of the theory behind it. – GSquadron Dec 30 '14 at 15:48
• When you have questions about a youtube video with just 1700 views, you might want to ask the author for clarification. – Philipp Dec 30 '14 at 15:51
• But he already is explaining it and I don't understand it in the way he explained. So maybe there could be someone else who might already know, or maybe learn something new. Anyway I will ask him. – GSquadron Dec 30 '14 at 15:53
• – Anko Dec 30 '14 at 16:06

Multiple canvases can help in some cases. Just as a quick example - say you have 2 layers (canvases) to your game.

The background of your game is not going to change very frequently, for example. So one canvas will be dedicated to just rendering the background of your game. This means you only have to render the background once, and only re-render it when it changes. The other layer of your game can render anything that moves constantly.

If all were rendered on the same canvas, the background would be re-drawn every frame along with everything that moves, and this can cause a more slow rendering time.

I hope this was somewhat clear - I can elaborate more if needed.

• Good answer in my opinion. Another example will be a player which is always in the center of screen and the background moving – Erez Dec 30 '14 at 16:43
• Thanks for the good answer. If you can elaborate this more, I think all would greatly benefit. For example, how do I know when to use multiple or just one canvas, if the background canvas is going to change or move in intervals of seconds. – GSquadron Dec 30 '14 at 17:32
• You can clear and redraw a rectangle in the middle of your canvas which is faster than doing so for the whole canvas. So if say we draw the hud in another canvas and your hp reduced, just redraw the hp section – Erez Dec 30 '14 at 19:04
• So to sum it up, use multiple canvases and region clearing to do the least unnecessary drawing you can have. Of course it's not a must, just a good practice – Erez Dec 30 '14 at 19:09
• I don't think there is a "formula" to determining if multiple should be used or not, but just think of "how often will this part be updated?" and "is this part only a small portion of the screen, so I can use a smaller canvas?" – CodeNMore Dec 30 '14 at 23:02