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

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.