Canvas Pixel Manipulation (v75)

Revision 75 of this benchmark created 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;

        data[index]   = 123;    // red
        data[++index] = 0;    // green
        data[++index] = 0;    // blue
        data[++index] = 0;      // alpha
    }
}
 
ready
32-bit Pixel Manipulation
var i = 0;
for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        data32[i++] = 123;
    }
}

imageData.data.set(buf8);
ready

Revisions

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