HTML5 Canvas eyedropper
2011
16
Nov
This is an old demo I made of an HTML5 canvas eyedropper. Circa 2009, I believe. Just click and drag on the image to see it in action.
rgb(0,0,0)
It's a pretty simple script, and works by declaring this function which handles onclick and ondrag events from the canvas. cnvs is the canvas element, and c is the canvas's 2D rendering context object.
pixel = function(e) {
// calculate the x and y coordinates of the cursor
var imgdata = c.getImageData( x, y, 1, 1 );
var new_color = [ imgdata.data[0],
imgdata.data[1],
imgdata.data[2] ];
color.style.background = "rgb("+new_color+")";
}
That's just a summary; the function actually does a little more than that. Take a look at the source for this page if you're interested, and contact me if there are any questions.