layered canvases (v14)

Revision 14 of this benchmark created on

Preparation HTML

<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>

Setup

bg_ctx.clearRect(0, 0, bg.width, bg.height);
  fg_ctx.clearRect(0, 0, fg.width, fg.height);
  background(bg_ctx);

Test runner

Ready to run.

Testing in
TestOps/sec
no layers
background(fg_ctx);
foreground(fg_ctx);
ready
layers
foreground(fg_ctx);
ready
layers, clearing the fg layer
fg_ctx.clearRect(100, 100, 64, 64);
foreground(fg_ctx);
ready
layers, clearing entire fg layer
fg_ctx.clearRect(0, 0, 640, 480);
foreground(fg_ctx);
ready

Revisions

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