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)

Sorry, in order to view this demo you need a Web browser that supports HTML5 canvas.

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.

blog comments powered by Disqus