mouseover circle HTML5 canvas

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

Answer 2

If you are going to have multiple semi-complex shapes and don't want to have to make any complicated math functions, you can always use a ghost canvas.

The idea is that when you want to test for a shape, you draw each relevant shape to a canvas in-memory and test the mouse x/y pixel to see if something is there.

I detail how to do it in this tutorial.

It works beautifully for smaller amounts of objects, but if you plan on having more than ~200 objects on the screen, you will want to switch to faster, mathematical methods.