Buffering

JavaScript performance comparison

Test case created by Daniel Baulig (Ba. Thesis)

Preparation code

<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>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Store Pixelbuffer
pixelBuffer = context.getImageData(0, 0, w, h);
pending…
Store Imagebuffer
imageBuffer.src = canvas.toDataURL();
pending…
Store Canvasbuffer
bufferContext.drawImage(canvas, 0, 0, w, h);
pending…
Apply Pixelbuffer
context.putImageData(pixelBuffer, 0, 0);
pending…
Apply Imagebuffer
context.drawImage(imageBuffer, 0, 0);
pending…
Apply Canvasbuffer
context.drawImage(bufferCanvas, 0, 0);
pending…
Simple Redraw
context.clearRect(0, 0, w, h);
for (i = 0; i < c; i++) {
 drawCircle(circles[i]);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

2 comments

cefaci commented :

A test only ImageBuffer vs CanvasBuffer...

cefaci commented :

A test only between ImageBuffer vs CanvasBuffer... http://jsperf.com/imagebuffer-vs-canvasbuffer

Add a comment