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 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.