Canvas Pixel Manipulation (v54)

Revision 54 of this benchmark created on

Description

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

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);

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) {
  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
}
ready
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
}
ready
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
}
ready

Revisions

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