Events in elements within a canvas

Question

I\'ve draw an image inside a canvas tag. How could I add events to it? I want to do something when user clicks in that image.

character.addEventListener(\'cl         


        

Answer 1

get click event of each rectangle inside canvas?

Further more, I have found that this answer does not work in Mozilla.

Instead use clientX instead of offsetX.

Example, I have created a dynamic canvas image gallery on github at: https://github.com/michaelBenin/fi-test

Every time the window is resized I recalculate the x, y, of each image drawn, from there I run the collisions function when the canvas is clicked.

Basically you get the x, y value from the click event and check to see if there is anything on the canvas at those coordinates.

Here is another good link on registering click events inside of canvas: http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/