Question

Is it possible to use the ImageData object to retrieve x,y pixel locations on an html5 canvas that are ‘black’? I am fairly new to the canvas and am having a hard time figuring out if this is possible or how to implement it.

Answer 1

Indeed you can do that.

You will have to getImageData of the canvas context and loop through it in a block of 4s which represent the RGBA channels and then compare each channel separately.

ImageData for multiple pixels is a bit tricky.
Imaging var imgData = ctx.getImageData(0, 0, width, height); :

Now imgData.data is a big array which has the following format:

imgData.data[0] // is the Red channel of the first pixel
imgData.data[1] // is the Green channel of the first pixel
imgData.data[2] // is the Blue channel of the first pixel
imgData.data[3] // is the Alpha (transparency) channel of the first pixel

imgData.data[4] // is the Red channel of the second pixel
... etc ...

Check demo for what you asked http://jsfiddle.net/GXrd5/