Canvas Pixel Manipulation

JavaScript performance comparison

Revision 54 of this test case created

Info

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

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

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) {
  var j = i,
      r = data[j],
      g = data[++j],
      b = data[++j];

  data[i] = r; // red
  data[++i] = g; // green
  data[++i] = b; // blue
  data[++i] = 255; // alpha
}
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. Here’s a list of current revisions for this page:

0 comments

Add a comment