Canvas Pixel Manipulation

JavaScript performance comparison

Revision 19 of this test case created by Arkanciscan

Preparation code

<canvas id="little" height="100" width="100">
</canvas>
<canvas id="big" height="200" width="200">
</canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var little = document.getElementById('little');
  var littleCtx = little.getContext('2d');
  var littleImg = littleCtx.getImageData(0, 0, little.width, little.height);
  var littleData = littleImg.data;
  
  var big = document.getElementById('big');
  var bigCtx = big.getContext('2d');
  var bigImg = bigCtx.getImageData(0, 0, big.width, big.height);
  var bigData = bigImg.data;
  
  var buf = new ArrayBuffer(bigImg.data.length);
  var buf8 = new Uint8ClampedArray(buf);
  var data32 = new Uint32Array(buf);

};

Benchmark.prototype.teardown = function() {
  bigCtx.putImageData(bigImg, 0, 0);
  littleCtx.putImageData(littleImg, 0, 0);

};
</script>

Preparation code output

<canvas id="little" height="100" width="100"> </canvas> <canvas id="big" height="200" width="200"> </canvas>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
8-bit Pixel Manipulation
for (i = 0; i < littleData.length; i++) {
  littleData[i] = Math.floor(Math.random() * 256);
}
pending…
32-bit Pixel Manipulation
for (i = 0; i < data32.length; i++) {
  data32[i] = (Math.floor(Math.random() * 256) << 24) | // alpha
  (Math.floor(Math.random() * 256) << 16) | // blue
  (Math.floor(Math.random() * 256) << 8) | // green
  Math.floor(Math.random() * 256); // red
}

bigImg.data.set(buf8);
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.

0 Comments