HTML5: Your visual blueprint™ for designing rich web pages and applications

QUERY INDIVIDUAL CANVAS PIXELS

The HTML5 canvas gives you direct access to individual pixels. You can use this to query individual pixels for red, green, blue, and alpha channel values. This process is done by retrieving a static snapshot of the canvas as an image creating the image’s data array:

var image = context.getImageData(x, y, w, h);

This method will take a rectangular picture of the canvas element and store it in an ImageData object. This object provides three properties: height, width, and data. The data property is actually an array that contains a massive list of numbers, four for each pixel, that describe the pixel’s color channels:

for (var x = 0; x < image.width; x++){ for (var y = 0; y < image.height; y++){ var index = (y*image.width+x)*4; ...