Canvas ImageData getPixel

Example

by Niklas Knaack

JavaScript

var canvas = document.createElement( 'canvas' );
	canvas.width = 100;
	canvas.height = 100;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );

var imageData = context.getImageData ( 0, 0, 100, 100 );
var data = imageData.data;

for ( var i = 0, l = data.length; i < l; i += 4 ) {

	data[ i ]     = Math.round( Math.random() * 255 );
    data[ i + 1 ] = Math.round( Math.random() * 255 );
    data[ i + 2 ] = Math.round( Math.random() * 255 );
    data[ i + 3 ] = 255;

}

context.putImageData( imageData, 0, 0 );

function getPixel( x, y ) {

    var i = ( x + y * imageData.width ) * 4;

    return { r:data[ i ],
             g:data[ i + 1 ],
             b:data[ i + 2 ],
             a:data[ i + 3 ] }

};

var color = getPixel( ( Math.random() * 99 + 1 ) | 0, ( Math.random() * 99 + 1 ) | 0 );

alert( 'RGBA: ' + color.r + ' ' + color.g + ' ' + color.b + ' ' + color.a );