Canvas Pixel Manipulation

JavaScript performance comparison

Revision 72 of this test case created by orwellophile

Info

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 code

<canvas id="canvas" height="800" width="256"></canvas>
<script src="//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>
<script>
Benchmark.prototype.teardown = function() {
    counter++;
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/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);
pending…
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);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment