html5 double layer canvas vs on layer canvas

JavaScript performance comparison

Revision 3 of this test case created by Franck Dubois

Preparation code

<canvas id="background" width="400" height="400" style="position:absolute;z-index:0;border: 1px solid #000000;">
</canvas>
<canvas id="foreground" width="400" height="400" style="position:absolute;z-index:1;border: 1px solid #000000;">
</canvas>
<script>
var bgCtx= document.querySelector('#background').getContext('2d');
var fgCtx= document.querySelector('#foreground').getContext('2d');

var imgBg = new Image();
imgBg.src = 'http://www.faire-des-jeux.com/jsperf/background.jpg';
bgCtx.drawImage(imgBg,0,0);
		
var	imgFg = new Image();
imgFg.src = 'http://www.faire-des-jeux.com/jsperf/module.png';
</script>
    

Preparation code output

<canvas id="background" width="400" height="400" style="position:absolute;z-index:0;border: 1px solid #000000;"> </canvas> <canvas id="foreground" width="400" height="400" style="position:absolute;z-index:1;border: 1px solid #000000;"> </canvas>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
one layer canvas
fgCtx.clearRect(0,0,1000,600);
fgCtx.drawImage(imgBg,0,0);
fgCtx.drawImage(imgFg,1,1);


pending…
double layer canvas
fgCtx.clearRect(0,0,1000,600);
fgCtx.drawImage(imgFg,1,1);

pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments