html5 double layer canvas vs on layer canvas (v10)

Revision 10 of this benchmark created on

Description

Test des performances d'affichage de canvas html5.

En mode double layer : un premier canvas affiche une image de fond et un second canvas (affiché au dessus du premier) s'efface puis affiche une petite image.

En mode one layer : un seul canvas s'efface, puis affiche une image de fond et enfin une petite image.

Preparation HTML

<div style="position: relative; width: 400px; height: 400px">
<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>
</div>

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

<canvas id="main" width="400" height="400">
</canvas>

<script>
var bgCtx= document.querySelector('#background').getContext('2d');
var fgCtx= document.querySelector('#foreground').getContext('2d');
var bg2Ctx= document.querySelector('#background2').getContext('2d');
var fg2Ctx= document.querySelector('#foreground2').getContext('2d');
var mainCtx= document.querySelector('#main').getContext('2d');

document.querySelector('#background2').parentNode.removeChild(document.querySelector('#background2'));
document.querySelector('#foreground2').parentNode.removeChild(document.querySelector('#foreground2'));

var imgBg = new Image();
imgBg.src = 'http://www.faire-des-jeux.com/jsperf/background.jpg';

var     imgFg = new Image();
imgFg.src = 'http://www.faire-des-jeux.com/jsperf/module.png';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
one canvas
bgCtx.clearRect(0,0,400,400);
bgCtx.drawImage(imgBg,0,0);
fgCtx.clearRect(0,0,400,400);
fgCtx.drawImage(imgFg,200,200);
 
ready
double layer canvas
bg2Ctx.clearRect(0,0,400,400);
bg2Ctx.drawImage(imgBg,0,0);
fg2Ctx.clearRect(0,0,400,400);
fg2Ctx.drawImage(imgFg,200,200);

mainCtx.clearRect(0,0,400,400);
mainCtx.drawImage(bg2Ctx.canvas, 0, 0);
mainCtx.drawImage(fg2Ctx.canvas, 0, 0);
ready

Revisions

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