Performance of background-canvas vs. regular canva

问题:

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?

回答1:

test.php:11Regular Canvas 606
test.php:20Background Canvas 449
test.php:11Regular Canvas 516
test.php:20Background Canvas 483

Regular seems to underperform compared to background canvas in my tests on chrome in linux debian, heres the code used ( also added to http://jsfiddle.net/hDPVr/ )

<div style="width:300; height:200; background: -webkit-canvas(test_canvas); "></div>
<canvas id="canvas" style="width:300; height:200;"></div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var regular_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Regular Canvas', regular_timer - (new Date().getTime()) )



    var context = document.getCSSCanvasContext('2d', 'test_canvas', 300, 200); 
    var background_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Background Canvas', background_timer - (new Date().getTime()) )

</script>

So the only thing that I did for testing is fillRect, but it's still at least 10% better in some cases

回答2:

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.