Canvas Pixel Manipulation (v72)

Revision 72 of this benchmark created by orwellophile on

Description

Tests two different methods of manipulating pixels using the canvas. BUT THIS TIME WE ACTUALLY PUT THE DATA TO THE F**KING SCREEN WITHIN THE TEST, change it, and display change.

And we make the canvas much bigger.

Preparation HTML

<canvas id="canvas" height="800" width="256"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width = $('.user-output').width()
var canvasHeight = canvas.height = $('.user-output').height()
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var data = imageData.data;

var counter = 0;



var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data32 = new Uint32Array(buf);
</script>

Teardown


    counter++;

Test runner

Ready to run.

Testing in
TestOps/sec
8-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 = counter + (x * y) & 0xff;

        data[index]   = value;    // red
        data[++index] = value;    // green
        data[++index] = value;    // blue
        data[++index] = 255;      // alpha
    }
}

ctx.putImageData(imageData, 0, 0);
ready
32-bit Pixel Manipulation
for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var value = counter + (x * y) & 0xff;

        data32[y * canvasWidth + x] =
            (255   << 24) |    // alpha
            (value << 16) |    // blue
            (value <<  8) |    // green
             value;            // red
    }
}

imageData.data.set(buf8);
ctx.putImageData(imageData, 0, 0);
ready

Revisions

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