How efficient is layering multiple canvases?

Question

I've been wondering if layering canvases is actually an efficient means of increasing performance on a game.

Eg, 2 or 3 canvases of the same size on top of each other.

It's difficult to find results of testing from this, but from what I understand about drawing, if the layer on top of the others is changed, the browser would have to repaint the area to pixels anyway. Furthermore if those canvases all had to move at the same time, you've multiplied the amount of pixels that would need to be calculated.

I was wondering how the browser handles painting canvases beneath the others if an element above changes.

Is it more efficient due to not having to call the canvas methods themselves again? Wouldn't they still need painting?

Answer 1

My experience is anecdotal, so you really need to test your idea to see if its better.

You're probably going to get the best performance by creating offscreen (in memory) canvases and compositing the different layers of your game with those into a single visible canvas where the game is viewed.

Answer 2

I'm not sure if this will be very helpful, but I'll tell you anyway. Let's say that you've got 2 canvases and you want your game to switch between them under certain condition. This might be possible by using some HTML, CSS and JavaScript.

 <canvas id="canvas1" width=500 height=500 style="border: 2px solid #00F"></canvas> <canvas id="canvas2" width=500 height=500 style="border: 2px solid #F00"></canvas> <button id="switcher" onclick="switchcanvas=true">Click here to switch the canvas!</button> <style> #canvas1 { left: 0%; right: 0%; display: block; } #canvas2 { left: 0%; right: 0%; display: none; } </style> <script> var switchcanvas = false; var canvas1 = document.getElementById("canvas1"); var canvas2 = document.getElementById("canvas2"); function update() { if (switchcanvas) { if (canvas1.style.display === "block") { canvas1.style.display = "none"; canvas2.style.display = "block"; switchcanvas = false; //if you set this to true or remove it the canvases will keep switching. } else { canvas1.style.display = "block"; canvas2.style.display = "none"; switchcanvas = false; } } } update(); setInterval(update, 1); //function update will update every ms, you can change that though. </script> 

I tested it and it worked. And yes, it should improve your game's performance since each canvas can have its own context.

Answer 3

I don't know if this is correct, but in my experience if you use two Canvases with the same frame (refresh) rate the performance improvement would be minimal, if there is any at all. You would get an improvement if the refesh rate for Canvas 1 is lower than Canvas 2. A good use case for this would be a grid and a moving object. If the grid doesn't change, you don't have to redraw it. This does not apply for the moving object, because you want to see it moving.