Get a pixel from HTML Canvas?

Question

Is it possible to query a HTML Canvas object to get the color at a specific location?

Answer 1

If you want to extract a particular color of pixel by passing the coordinates of pixel into the function, this will come in handy:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function detectColor(x, y){
  data=ctx.getImageData(x, y, 1, 1).data;
  col={
    r:data[0],
    g:data[1],
    b:data[2]
  };
  return col;
}

x, y is the coordinate you want to filter out color.

var color = detectColor(x, y)

The color is the object, you will get the RGB value by color.r, color.g, color.b.