How to work with HTML elements underneath a canvas

Question

I have a container of some HTML divs and with some CSS if I hover over them, the background color changes. I want to overlay a canvas on top of the container so that I can draw lines. The problem is that when the canvas is overlaid, the hovering changes of the divs no longer works. Is there a way to overlay a canvas but still have CSS or JavaScript onmouseover events still work on the elements beneath?

Answer 1

So you want sort of a transparent canvas which passes all mouse events except clicks to the elements behind it?

IMHO, you'd need to use JS for that: Capture all the events on the canvas, then manually pass them on to the div behind the canvas. If you have multiple divs, you'd need some sort of lookup depending on the (x,y) coordinates of the mouse.