Canvas Pixel Manipulation (v37)

Revision 37 of this benchmark created by PAEz on

Description

Tests two different methods of manipulating pixels using the canvas.

Preparation HTML

<canvas id="canvas" height="600" width="600">
</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 buf = new ArrayBuffer(imageData.data.length);
    var buf8= new Uint8ClampedArray(buf);
    var data32 = new Uint32Array(buf);
    var _data32 = new DataView(buf);
    
    //We will set alpha to full opacity
    //ONLY ONCE, so that we are free to
    //write 25% less bytes for the 8-bit test:
    ///
     var cc=canvasHeight*canvasWidth*4;
     for(var r=3; r<cc; r+=4)
      data[r]=255; //Alpha
    
     var x=0,y=0;

Teardown


    ctx.putImageData(imageData, 0, 0);

Test runner

Ready to run.

Testing in
TestOps/sec
8-bit Pixel Manipulation
//First optimization attempt: Use a single
//loop, and a while loop, which should
//be faster as a for:
///
var index=0;
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
 //Second optimization: Use an IF
 //for the task that was previously
 //in charge of the FORs:
 ///
 var value=x*y&0xFF;
 data[index]=value;
 data[index+1]=value;
 data[index+2]=value;
 index+=4;
 }
}
ready
32-bit Pixel Manipulation
var s=0;
//var value=0;
for (var y = 0; y < canvasHeight; ++y) {
// value=y;
  for (var x = 0; x < canvasWidth; ++x) {
    var value = x * y&0xFF;
//   value=value+x;

    data32[s] =
    (
     0xFF000000    |
     ((value) << 16) | // blue
     ((value) <<  8) | // green
     (value)
    ); // red
   s++;
  }
}

data.set(buf8);
ready
8-Bit with summed indexes
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var index = (y * canvasWidth + x) << 2;

    var value = x * y&0xFF;

    data[index] = value; // red
    data[index + 1] = value; // green
    data[index + 2] = value; // blue
   index+=4;
  }
}
ready
8-Bit with incrementing indexes
var index = 0;
for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        

        var value = x * y&0xFF;

        data[index]   = value;    // red
        data[++index] = value;    // green
        data[++index] = value;    // blue
     index+=2;
    }
}
ready
32-Bit with DataViews
var s=0;
//var value=0;
for (var y = 0; y < canvasHeight; ++y) {
// value=y;
  for (var x = 0; x < canvasWidth; ++x) {
    var value = x * y&0xFF;
//   value=value+x;

//    data32[s] =
    _data32.setUint32
    (s,
     0xFF000000    |
     ((value&0xFF) << 16) | // blue
     ((value&0xFF) <<  8) | // green
     (value&0xFF),true
    ); // red
   s+=4;
  }
}

data.set(buf8);
ready
Original, Slower 32-Bit Procedure
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
  }
}

imageData.data.set(buf8);
ready

Revisions

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