2 HTML canvasses stacked on top of each other, with the top transparent to click events?

Question

So I am building a small CAD app where I am supposed to have a grid as well.

The grid must be on top of all elements. Unfortunately the way I implement UNDO functionality does not allow me to incorporate the grid into the main canvas.

Therefore I have thought of stacking 2 canvasses on top of each other.

• The top grid would be the ''Grid Canvas'', used only for drawing a grid.

• The bottom grid would be the ''main canvas'', used for everything else.

Now the issue is that I can stack the 2 canvasses just fine, but the top canvas blocks the click events to the main canvas.

Is there any solution to this?

I am using Paper.js as the library to create the app.

Answer 1

pointer-events:none

On the element you want clicks to 'pass-through' https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events