Performance of background-canvas vs. regular canvas

Question

A while back webkit (and thus Safari) began to support CSS canvas-backgrounds for elements (Source: http://www.webkit.org/blog/176/css-canvas-drawing/).

This could greatly simplify the creation of games and multimedia, in that you dont need to inject a canvas-tag into a DIV (for instance), but simply hook into the background of the DIV directly. Something like this perhaps:

<div id="gameview"
style="background: -webkit-canvas(myscreen); width: 320px; height: 480px;">
</div>

<script>
    var target = document.getElementById("gameview");
    var wd = target.clientWidth;
    var hd = target.clientHeight;
    var context =  document.getCSSCanvasContext("2d", "myscreen", wd, hd);
    /* draw stuff here */
</script>

I was wondering, are there any speed penalties involved in this? In theory i think drawing to a background canvas should be faster than drawing to a canvas tag, especially if the target element is empty.

Have anyone tested this for high-speed demos or games?

Answer 1

According to my tests (also run in reversed order), original canvas element is slightly but consistently slower than the background canvas.

Chromium 17 draws a chess-board 10000 times in:

• ~470 ms on the background canvas
• ~520 ms on a canvas element

Safari 5 shows similar dynamics.

Try setting the number of iterations to 100000, results should be consistent with the above.

---

Update half a year later

We tried the background canvas approach in one project (as an attempt for a minor optimization), and the results were dramatically opposite to our expectations. The whole thing (two layers: one – a div with background canvas, the other – a regular canvas) became marginally slower. In fact, when we introduced the background canvas, the app became slow as hell. Tested in Chrome 21.

I definitely would not vouch for the background canvas to be faster in all situations.