Canvas Double Buffering Performance (v3)

Revision 3 of this benchmark created by Amirali J on

Preparation HTML

<canvas width="800" height="600" id="live">
</canvas>
<canvas width="800" height="600" style="display:none;visibility:hidden" id="buffer">
</canvas>

Setup

var liveCtx = document.getElementById("live").getContext("2d");
    var bufferCtx = document.getElementById("buffer").getContext("2d");
    var programaticBufferCtx = document.createElement("canvas").getContext("2d");
    
    function drawCircle(ctx, x, y, size) {
      ctx.lineWidth = 1;
      ctx.fillStyle = "#FFFFFF";
      ctx.beginPath();
      ctx.arc(x, y, size, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
    }

Test runner

Ready to run.

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

Revisions

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