Canvas Pixel Manipulation (v106)

Revision 106 of this benchmark created on

Description

Tests two different methods of manipulating pixels using the canvas.

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
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
    }
}
ready
getImageData
ctx.getImageData(0, 0, canvasWidth, canvasHeight)
ready

Revisions

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