How To Get Pixel Coordinates From Canvas Polygon (filled Area)

I am creating an interface that enables user to hightlight custom area in map with overlay canvas polygons. as in figure. then, I want to get all filled pixels from canvas with spe

Solution 1:

What you need is reverse processing. You can simply iterate canvas and create index and related RGBA values by following formula and compare with filled color.

var index = (x + y * imageData.width) * 4;   

sample execution is as follow:

var imageData = ctx.getImageData(0, 0,canvas.width, canvas.height);
  var data = imageData.data;
  var filled=[];
  for(var x=0;x<canvas.width;x++){
  for(var y=0;y<canvas.height;y++){
    var index = (x + y * imageData.width) * 4;

    if(data[index+0]==colorToCheck.R && data[index+1]==colorToCheck.G && data[index+2]==colorToCheck.B && data[index+3]==colorToCheck.A){
        var cx={"X":x,"Y":y}; //
        filled.push(cx);
    }
  }