Question

I am wondering how to set an area as a semi-complex shape (circle) defined in the canvas so when the user mouse overs the shape, a function will be called.

I do not wish to use libraries at all such as KineticJS etc.

Currently I have added an event listener to the canvas element so that on mouse move I call multiple functions; one of which works out the mouse x/y coordinates relative to the canvas. As such, any rectangular shape is easy to ‘listen’ for using a basic if statement (as the canvas is interactive and redrawn each mouse move).

For circular objects, as well as say triangular objects, is there a way to use a similar method using trigonometry and an if statement?

Or are there better ways to have multiple areas on a canvas which on mouse over, call a function?

Cheers

Answer 1

If you know where the mouse is and you know where the circle is on the canvas then the mouse is inside the circle when the distance from the mouse to the center of the circle is less that the radius. If that’s true manually call what ever you need to call.

Hope that helped