How to find the associated polygon from pixel canvas HTML5 - html

Question

I am working on a HTML5 canvas application. I am now able to find the co ordinates and the hex value of any point I am clicking over the canvas.
If suppose I am clicking an area which have a filled polygon (and I know the color of the polygon). Is there any way or algorithm to return the enclosing Co-ordinates which drew the polygon ??

Answer 1

Solution
Store the polygon points in objects or array and use the canvas method:
var boolean = context.isPointInPath(x, y);
By storing the points as objects/arrays you can simply iterate through the collection to re-build the path for each polygon and then call the method above (no need to redraw the polygon for checks).
If you have a hit then you know which object it is as it would be the current. You can store other meta data on these objects such as color.
Example
You can make a simple class to store coordinates as well as color (a basic objectyou can extend as needed):
function Polygon(pts, color) {
this.points = pts;
this.color = color;
return this;
}
Then define some points:
/// object collection
var myPolygons = [];
/// add polygons to it
myPolygons.push( new Polygon([[10,10], [30,30], [70,70]], 'black') );
myPolygons.push( new Polygon([[50,40], [70,80], [30,30]], 'red') );
Render the polygons
Then render the polygons:
for(var i = 0, p, points; p = myPolygons[i]; i++) {
points = p.points;
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for(var t = 1; t < points.length; t++) {
ctx.lineTo(points[t][0], points[t][1]);
}
ctx.closePath();
ctx.fillStyle = p.color;
ctx.fill();
}
Check if the point is in the path
Then check for hit based on position x, y when you do a click.
As you can see the function is almost identical to the render function (and of course you can refactor them into a single function) but this doesn't actually draw anything, only re-builds the path for check.
for(var i = 0, p, points; p = myPolygons[i]; i++) {
points = p.points;
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for(var t = 1; t < points.length; t++) {
ctx.lineTo(points[t][0], points[t][1]);
}
ctx.closePath();
/// instead of drawing anything, we check:
if (ctx.isPointInPath(x, y) === true) {
alert('Hit: ' + p.color);
return;
}
}
Conclusion
Typically this will turn out to be faster than iterating the bitmap array (which is also is a perfectly good solution). This is mainly because the checks are done internally in compiled code.
In the future we will have access to building Path objects ourselves and with that we can simply pass a single Path object already holding all the path info instead of re-building it, which means even higher speed.