Canvas Pixel Manipulation

JavaScript performance comparison

Revision 104 of this test case created by

Preparation code

<canvas id="canvas" height="1024" width="1024"></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 buf = data.buffer
  var buf8 = new Uint8ClampedArray(buf);
  var data32 = new Uint32Array(buf);

};

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

};
</script>

Preparation code output

<canvas id="canvas" height="1024" width="1024"></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
32-bit Pixel Manipulation with read ex inline create view
var bufex = data.buffer;
var data32ex = new Uint32Array(buf);

var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32ex[index] >> 24) & 0xff;
  b = (data32ex[index] >> 16) & 0xff;
  g = (data32ex[index] >> 8) & 0xff;
  r = (data32ex[index]) & 0xff;
  a = a + 1;
  r = g + 1;
  g = g + 1;
  b = b + 1;
  data32ex[index] = (((a) & 0xff) << 24) | (((g) & 0xff) << 16) + (((b + 1) & 0xff) << 8) + (((r) & 0xff));
}
pending…
8-bit Pixel Manipulation
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var index = (y * canvasWidth + x) * 4;

    var value = x * y & 0xff;

    data[index] = value; // red
    data[++index] = value; // green
    data[++index] = value; // blue
    data[++index] = 255; // alpha
  }
}
pending…
32-bit Pixel Manipulation
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var value = x * y & 0xff;

    data32[y * canvasWidth + x] =
      (255 << 24) | // alpha
    (value << 16) | // blue
    (value << 8) | // green
    value; // red
  }
}
pending…
32-bit Pixel Manipulation with read
var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32[index] >> 24) & 0xff;
  b = (data32[index] >> 16) & 0xff;
  g = (data32[index] >> 8) & 0xff;
  r = (data32[index]) & 0xff;
  data32[index] = (((a + 1) & 0xff) << 24) | (((b + 1) & 0xff) << 16) + (((g + 1) & 0xff) << 8) + (((r + 1) & 0xff));
}
pending…
8-bit Pixel Manipulation with read
for (var index = 0; index < length; index += 4) {
  data[index] = data[index] + 1; // red
  data[index + 1] = data[index + 1] + 1; // green
  data[index + 2] = data[index + 2] + 1; // blue
  data[index + 3] = data[index + 3] + 1; // alpha
}
pending…
32-bit Pixel Manipulation with read ex
var length = canvasWidth * canvasHeight;
var a, r, g, b;
for (var index = 0; index < length; index++) {
  a = (data32[index] >> 24) & 0xff;
  b = (data32[index] >> 16) & 0xff;
  g = (data32[index] >> 8) & 0xff;
  r = (data32[index]) & 0xff;
  a = a + 1;
  r = g + 1;
  g = g + 1;
  b = b + 1;
  data32[index] = (((a) & 0xff) << 24) | (((g) & 0xff) << 16) + (((b + 1) & 0xff) << 8) + (((r) & 0xff));
}
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