Get canvas mouse move event listener function to work when text is above it, keep text selectable.

Hi everyone, I have a canvas that is running the Web GL Fluid particle animation. The problem I'm having is that if the canvas is below a object the mousemove event for the canvas stops firing. If I use css such as "pointer-events: none;" on the object that's covering the canvas the animation will work but then I can't select text or use buttons in the object. How do I get the canvas to fire its mouseover animation even when objects are covering it all while being able to interact with the those objects. Is there is a way to add to or adjust the canvas mouse event listener so it fires when objects are over it? This is the current code for the canvas mousemove listener:

canvas.addEventListener('mousemove', function (e) { var pointer = pointers[0]; if (!pointer.down) return; var posX = scaleByPixelRatio(e.offsetX); var posY = scaleByPixelRatio(e.offsetY); updatePointerMoveData(pointer, posX, posY); console.log('over the canvas'); });

Here are examples sites that have canvas mouseover interaction below selectable text:
https://advanced.team/ https://www.vantajs.com/

Sample in code pen: https://codepen.io/chriscalabrese/pen/RwjmNZW

Thanks!