How to make a canvas element responsive to a mouse click event?

Question

I want to draw a range of graphical squares which all open up an individual window with some information. How do i do that?

Answer 1

Like all others Html elements, by attaching an event to the svg node ( childs of <svg> ) you want: they differ from html elements, but svg are also node of the DOM ( Document Object Model) through which we handle all that stuff with JavaScript...

It seems to me that you must attch your event with the 'attachEvent' function: unlike html elements, you cannot set directly an attribute onclick ( and on(event) globaly ) to a svg element ( at least through JS, I never try inline ).

Answer 2

visph is correct,
actually in canvas there are no elements as node of dom it is in svg or css so can't be done like them but to make it responsive you can also add event listener then check the coordinates of clicks to find it was square or not.

Answer 3

On disk, the click occurs only if in shape ( not necessarly everywhere in the bounding box )... I don't know for other shapes: it may depends...

Check this, from my codes:
https://code.sololearn.com/Wq2bwzSxSnjl/#html

It's a mini test-tuto where you can go study the principles of accessing svg elements and reacting to events ( even if there's no js, only css in this snippet ) ;)