Canvas Pixel Manipulation

JavaScript performance comparison

Revision 57 of this test case created by Andymensional

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);
  var r,g,b,p,j;

};

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
for (var i = 0; i < length; 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++) {
      p = data32[i];
      r = p & 255;
      g = (p>>8) & 255;
      b = (p>>16) & 255;


  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++) {
     j = i * 4;
      r = data[j];
      g = data[j+1];
      b = data[j+2];


  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