How to bypass blocks?

Question

css

The problem is the following. There is a canvas which in the background diverges with smoky paint when the cursor moves, but when you hover over a block, for example, an inscription, it stops working, only around. Here is an example How to do to ignore block i.e. so that the paint continues to follow the mouse behind the block continuously?

Answer 1

.text-take {
 ...
 pointer-events: none;
}

but this way you disable full interaction with the element. In general, you need to be careful with this property.

Answer 2

If the c option pointer-events: none;is not suitable, then you can move the event handlers from the canvas to the body.

- canvas.addEventListener("mousemove", e => {
+ document.body.addEventListener("mousemove", e => {
// аналогично для других событий (touchmove, touchstart)