Canvas Pixel Manipulation

JavaScript performance comparison

Revision 56 of this test case created by HotSix

Preparation code

<canvas id="canvas" height="256" width="256">
</canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var canvas = document.getElementById('canvas');
  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  var ctx = canvas.getContext('2d');
  var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  
  var data = imageData.data;
  var length = data.length;
  var length32 = length / 4;
  
  var data32 = new Uint32Array(data.buffer);

};

Benchmark.prototype.teardown = function() {
  ctx.putImageData(imageData, 0, 0);

};
</script>

Preparation code output

<canvas id="canvas" height="256" width="256"> </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
var r, g, b;
for (var i = 0, len = length >> 2; i < len; i += 4) {
  r = data[i];
  g = data[i + 1];
  b = data[i + 2];

  data[i] = r;
  data[i + 1] = g;
  data[i + 2] = b;
  data[i + 3] = 255;
}
pending…
32-bit Pixel Manipulation
for (var i = 0; i < length32; ++i) {
  var v = data32[i],
      r = v & 255,
      g = v & 255 >> 8,
      b = v & 255 >> 16;


  data32[i] = (255 << 24) | // alpha
  (b << 16) | // blue
  (g << 8) | // green
  r; // red
}
pending…
32-bit Pixel Manipulation with 8-bit lookup
for (var i = 0; i < length32; ++i) {
  var j = i * 4,
      r = data[j],
      g = data[++j],
      b = data[++j];


  data32[i] = (255 << 24) | // alpha
  (b << 16) | // blue
  (g << 8) | // green
  r; // red
}
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