addEventListener in Canvas tag

Question

Javascript - Canvas tag - HTML5

Hello,

I have a canvas tag to create a graphic. At each section of my line, I have a "dot" to enable a 'mouseover' and display more detail.

Everything works fine when I don't add an event listener to this dot.

Firebug is warning me : s.addEventListener is not a function...

Is it possible to create dynamic event listener? (I'm new to Javascript)

Answer 1

You cannot attach DOM events to things other than DOM objects (elements). The canvas is a DOM element, the things you are drawing to the canvas are not. They become a part of the canvas as pixels of an img.

In order to detect a click on a specific point on your canvas you must attach the click event on the canvas element, and then compare the x/y coordinates of the click event with the coordinates of your canvas.

This was answered in: "How do I get the coordinates of a mouse click on a canvas element?"