Canvas layers... what is performance effect?

Question

I was curious if using canvas on top of canvas' in html would effect performance at all?

My idea is to place any thing stationary in one canvas, and then anything that moves in another... effectively reducing the amount of redraws occuring.

As i won't need to redraw any thing stationary, it be wise to not keep clearing it and re-drawing it. So i wanted to put a canvas on a canvas... but wasn't sure if this would impose some kind of performance drop in itself?

Has any one ever done bench tests on this?

Answer 1

This is can become a very nuanced question to the point that I fear giving you a general benchmark that tells you to do either-or because you should always always be benchmarking your own app's code to see where it might be faster or slower. Once your product is finished, whichever way you choose to go, I urge you to rebuild it the other way and do a real benchmark and see.

Its easy using jsperf to set up a test that compares drawing background + foreground on one canvas versus drawing background on one canvas only once, and then drawing foreground on a second canvas.

If you draw roughly the same amount of stuff in background and foreground then I think you'd expect to see the single-canvas be about 50% slower than uses two canvas.

Indeed that's what you see:

http://jsperf.com/one-vs-two-canvases

---

But hold the phone for a second. You have a static background? Why use two canvases then? Why not make that background a PNG and set it as the CSS background-image of the one canvas and be done with it? That would be even faster, and it would make the DOM less messy and you'd be avoiding this question altogether!

You should note that the number of layers you have does not necessarily scale well. Canvases are DOM objects and touching the DOM is slow, so positioning and using say, 30 canvases as 30 layers is going to take a toll. There is some number of canvases where it becomes much less worth it to use layers, but that number is typically higher than, say, 5. If you plan on using more than 5 canvases I'd strongly recommend doing your own benchmarks with your own code to see which is worth it. The IE9 profiler and JSperf both give very good results (JSperf in cross-browser numbers and IE9 in details of what exactly is eating up time).