Off DOM Canvas Double Buffering Performance (v10)

Revision 10 of this benchmark created by Rezoner on

Description

Render the scene in the buffer - then draw it on the visible canvas - vs live rendering.

Preparation HTML

<script>

  var liveCanvas = document.createElement("canvas");
  document.body.appendChild(liveCanvas);
  liveCanvas.width = 1024;
  liveCanvas.height = 768;
  var liveCtx = liveCanvas.getContext("2d");

  var bufferCanvas = document.createElement("canvas");
  bufferCanvas.width = 1024;
  bufferCanvas.height = 768;
  var bufferCtx = bufferCanvas.getContext("2d");

  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
Buffer (Offscreen)
for (var i = 0; i < 5000; i++){
drawCircle(bufferCtx, Math.random() * 700 | 0, Math.random() * 500 | 0, Math.random() * 75 | 0);}

liveCtx.drawImage(bufferCtx.canvas, 0, 0);
ready
Live
for (var i = 0; i <5000; i++)
drawCircle(liveCtx, Math.random() * 700 | 0, Math.random() * 500 | 0, Math.random() * 75 | 0);
ready

Revisions

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