Canvas Pixel Manipulation

JavaScript performance comparison

Revision 57 of this test case created by Andymensional

Info

Tests two different methods of manipulating pixels using the canvas, but this time by modifying current values.

there where some errors in it, as well as unneeded var-declarations in every loop cycle.

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

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

0 comments

Add a comment