Canvas Pixel Manipulation (v57)

Revision 57 of this benchmark created by Andymensional on

Description

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 HTML

<canvas id="canvas" height="256" width="256">
</canvas>

Setup

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;

Teardown


    ctx.putImageData(imageData, 0, 0);

Test runner

Ready to run.

Testing in
TestOps/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;
}
ready
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
}
ready
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
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.