How to get the pixel color (or colour) of an image at a precise co-ordinate

If you find this tutorial helpful, then please promote it by using the social links further down the page. What this script does is scan the image at a precise x and y co-ordinate and returns the rgba value of it. Please remember that in the web world, the x and y co-ordinate 1,1 starts at the top left of the image. Please also be aware that if you intend to use this script as soon as the page loads up, you must use it on window.load and not document.load. Document load happens once all the html and scripts are ready, window load happens once everything (including images) load. We of course need to have the images loaded first before we can start to scan them. Please note that this will work in most browsers, for Internet Explorer this will only work from IE9 and above as we are using the canvas element.

Below is the image we are scanning and we are looking for pixel 5,5:

And here is a div with the background color of the pixel found at 5,5:

Alternatively, you can download the zip here.