How to detect if a shape was clicked (HTML5 canvas)?

Question

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I

Answer 1

You could either try some canvas frameworks like http://kineticjs.com/ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow.com/a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.

Answer 2

Check in here:

Javascript check Mouse clicked inside the Circle or Polygon

meouw answer works for sure I've test it and guarantee it works. It seems that there are some other solutions, too that have been upvoted, maybe you can try them, either