Canvas Double Buffering Performance (v4)

Revision 4 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 programaticBufferCanvas = document.createElement("canvas");
    programaticBufferCanvas.width = 800;
    programaticBufferCanvas.height = 600;
    var programaticBufferCtx = programaticBufferCanvas.getContext("2d");
    liveCtx.clearRect(0, 0, 800, 600);
    bufferCtx.clearRect(0, 0, 800, 600);
    programaticBufferCtx.clearRect(0, 0, 800, 600);
    
    function drawCircle(ctx, x, y, size) {
      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.