addEventListener in Canvas tag

Question

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

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?"

Answer 2

If you're gonna be drawing basic structures, I suggest you make use of inline svg.

In this case, all the svg elements become DOM elements and you can attach separate events to each of them.