addEventListener in Canvas tag

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.


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