layered canvases

JavaScript performance comparison

Revision 3 of this test case created by Boris

Preparation code

<canvas id="bg" width="640" height="480" style="position: absolute;"></canvas>
<canvas id="fg" width="640" height="480" style="position: absolute;"></canvas>

<div style="min-width: 640px; min-height: 480px;">
  &nbsp;
</div>
<script>
  var fg = document.getElementById('fg');
  var bg = document.getElementById('bg');
  
  var fg_ctx = fg.getContext('2d');
  var bg_ctx = bg.getContext('2d');
  
  function background(ctx) {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, bg.width, bg.height);
  }
  
  function foreground(ctx) {
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 64, 64);
  }
</script>
      
<script>
Benchmark.prototype.setup = function() {
  bg_ctx.clearRect(0, 0, bg.width, bg.height);
  fg_ctx.clearRect(0, 0, fg.width, fg.height);
  background(bg_ctx);

};
</script>

Preparation code output

<canvas id="bg" width="640" height="480" style="position: absolute;"></canvas> <canvas id="fg" width="640" height="480" style="position: absolute;"></canvas> <div style="min-width: 640px; min-height: 480px;"> &nbsp; </div>

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
no layers
background(fg_ctx);
foreground(fg_ctx);
pending…
layers
foreground(fg_ctx);
pending…
layers, clearing the fg layer
fg_ctx.clearRect(100, 100, 64, 64);
foreground(fg_ctx);
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