get click event of each rectangle inside canvas?

Question

I dont know how to register click event on each rectangle.

here is the sample:

http://jsfiddle.net/9WWqG/1/

Answer 1

I found a way to make this work in mozilla using the clientX,clientY instead of offsetX/offsetY.

Also, if your canvas extends beyond the innerHeight, and uses the scroll, add the window.pageYOffset to the e.clientY. Goes the same way, if your canvas extends beyond the width.

Another example is at my github: https://github.com/michaelBenin/fi-test

Here is another link that explains this: http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/