Canvas Double Buffering Performance (v2)

Revision 2 of this benchmark created by Luke Barton 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
drawCircle(liveCtx,Math.random()*700|0,Math.random()*500|0,Math.random()*75|0);
ready
Draw Buffer
drawCircle(bufferCtx,Math.random()*700|0,Math.random()*500|0,Math.random()*75|0);
liveCtx.drawImage(bufferCtx.canvas,0,0);
ready
Draw Buffer (Programatic)
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.