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 clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?
Also found isPointInPath but it did not work.
To detect the click, the canvas element is first selected using the querySelector() method. The addEventListener() method is used on this element to listen the 'mousedown' event. This event is triggered whenever a mouse button is pressed down.
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
Canvas Coordinates The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner of the canvas. Along the X-axis, values increase towards the right edge of the canvas. Along the Y-axis, values increase towards the bottom edge of the canvas.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With