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

Setup JS

Teardown JS

Test cases

Test #1

Title *

Async

Code *

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

Test #2

Title *

Async

Code *ctx.getImageData(0, 0, canvasWidth, canvasHeight)

Test case details

Preparation Code

Test cases

Test #1

Test #2