Canvas Pixel Manipulation

JavaScript performance comparison

Revision 19 of this test case created by Arkanciscan

Info

Tests two different methods of manipulating pixels using the canvas.

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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment