HTML5 Canvas eyedropper

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.

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.

function pixel(e) {
  // calculate the x and y coordinates of the cursor
  var imagesdata = c.getImageData(x, y, 1, 1);
  var new_color = [
    imagesdata.data[0],
    imagesdata.data[1],
    imagesdata.data[2]
  ];
  color.style.background = "rgb(" + new_color.join() + ")";
}

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.