getImageData pixel by pixel or all image (v5)

Revision 5 of this benchmark created on

Description

Which is faster? A bunch of getImageData calls or one big one with the RAM munchies?

Preparation HTML

<script>
var canvas = document.createElement( 'canvas' );
canvas.height = 100;
canvas.width = 100;
var ctx = canvas.getContext( '2d' ),
    coords = [];


ctx.beginPath();
ctx.strokeStyle = "#999";
ctx.lineWidth = 5;
ctx.moveTo( 5,5);
ctx.lineTo( 915, 915 );
ctx.stroke();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getImageData
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
for( var x = 0; x < canvasWidth; x++ ) {
    for( var y = 0; y < canvasHeight; y++ ) {
        var data = ctx.getImageData( x, y, 1, 1 ).data;
        // if there's alpha, there's a pixel yo
        if ( data[3] > 128 ) {
            coords.push([x,y]);  
        } 
    }  
}
ready
cache
// do it for a whole data obj
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var cpa = ctx.getImageData( 0, 0, canvasWidth, canvasHeight).data;
for( var x = 0; x < canvasWidth; x++ ) {
    for( var y = 0; y < canvasHeight; y++ ) {
        var index = (y * canvasWidth) + x;
        var data = cpa[index];
        if ( data[3] > 128 ) {
            coords.push([x,y]);  
        } 
    }  
}
ready

Revisions

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