Buffering

Benchmark created by Daniel Baulig (Ba. Thesis) on April 14, 2011

Preparation HTML

<canvas width="800" height="600" id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var w = canvas.width,
      h = canvas.height,
      i, c = 100;
  
  var circles = [],
      circle;
  
  for (i = 0; i < c; i++) {
   circle = {};
   circle.r = 50;
   circle.x = Math.random() * (w - 2 * circle.r) + circle.r;
   circle.y = Math.random() * (h - 2 * circle.r) + circle.r;
   circle.color = 'blue';
   circles.push(circle);
  }
  
  function drawCircle(circle) {
   context.save();
   context.beginPath();
   context.arc(circle.x, circle.y, circle.r, 0, 4 * Math.PI);
   context.fillStyle = circle.color;
   context.fill();
   context.restore();
  }
  
  // Setup Canvas by initially drawing scene
  for (i = 0; i < c; i++) {
   drawCircle(circles[i]);
  }
  
  var bufferCanvas = document.createElement('canvas'),
      bufferContext = bufferCanvas.getContext('2d'),
      pixelBuffer, imageBuffer = new Image(w, h);
  
  bufferCanvas.width = w;
  bufferCanvas.height = h;
</script>

Test runner

pixelBuffer = context.getImageData(0, 0, w, h);

imageBuffer.src = canvas.toDataURL();

bufferContext.drawImage(canvas, 0, 0, w, h);

context.putImageData(pixelBuffer, 0, 0);

context.drawImage(imageBuffer, 0, 0);

context.drawImage(bufferCanvas, 0, 0);

context.clearRect(0, 0, w, h);
for (i = 0; i < c; i++) {
 drawCircle(circles[i]);
}

Revisions

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

• Revision 1: published by Daniel Baulig (Ba. Thesis) on April 14, 2011