Off DOM Canvas Double Buffering Performance (v6)

Revision 6 of this benchmark created by madencoder on

Description

This example uses a buffer which is not placed on the dom to achieve better performance.

Preparation HTML

<canvas width="800" height="600" id="live">
</canvas>
<script>
  var liveCtx = document.getElementById("live").getContext("2d");
  var bufferCtx = document.createElement("canvas").getContext("2d");
  bufferCtx.width = 800;
  bufferCtx.height = 600;

  liveCtx.lineWidth = 1;
  liveCtx.fillStyle = "#FFFFFF";
  bufferCtx.lineWidth = 1;
  bufferCtx.fillStyle = "#FFFFFF";

  function drawCircle(ctx, x, y, size) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Draw Live
for (var i = 0; i < 500; i++)
drawCircle(liveCtx, Math.random() * 700 | 0, Math.random() * 500 | 0, Math.random() * 75 | 0);
ready
Draw Buffer
for (var i = 0; i < 500; i++)
drawCircle(bufferCtx, Math.random() * 700 | 0, Math.random() * 500 | 0, Math.random() * 75 | 0);
liveCtx.drawImage(bufferCtx.canvas, 0, 0);
ready

Revisions

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