addEventListener in Canvas tag

canvas, dom-events, html, javascript

Solution

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

Problem

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)

Original source

Related problems