Canvas Pixel Manipulation

JavaScript performance comparison

Revision 106 of this test case created by

Preparation code

<canvas id="canvas" width="1280" height="720" style="width:1280px; height:720px;">
</canvas>

<script>
c = document.getElementById("canvas");
ctx = c.getContext("2d");
cpa = ctx.createImageData(1280, 720);
for (var i = 0; i < 1280 * 720; i+=4) {
  cpa.data[i * 4 + 0] = Math.round(Math.random() * 255);
  cpa.data[i * 4 + 1] = Math.round(Math.random() * 255);
  cpa.data[i * 4 + 2] = Math.round(Math.random() * 255);
  cpa.data[i * 4 + 3] = 255;
}
ctx.putImageData(cpa, 0, 0);
var canvasHeight = c.height;
var canvasWidth = c.width;

var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var data = imageData.data;
var buf = new ArrayBuffer(data.length);
var data32 = new Uint32Array(buf);
</script>
    

Preparation code output

<canvas id="canvas" width="1280" height="720" style="width:1280px; height:720px;"> </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
getImageData
ctx.getImageData(0, 0, canvasWidth, canvasHeight)
pending…
32-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 = data[index];
        data32[y * canvasWidth + x] =
            (255   << 24) |    // alpha
            (value << 16) |    // blue
            (value <<  8) |    // green
             value;            // red
    }
}
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