Canvas Pixel Manipulation

JavaScript performance comparison

Revision 35 of this test case created

Info

Tests two different methods of manipulating pixels using the canvas.

Preparation code

<canvas id="canvas" height="600" width="600">
</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 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;
   
};

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
//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;
 }
}
pending…
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);
pending…
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;
  }
}
pending…
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;
    }
}
pending…
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);
pending…
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);
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:

1 comment

PAEz commented :

oops....

Add a comment