listen to window instead of canvas and fix mouse position for window

[anasnaciri]

I know many want to use the fluid simulation as a background for their website, but only setting a canvas below the other elements doesn't seem to work perfectly, after changing the CSS so the canvas is below the other elements and is covering the whole screen, here are the changes I made so the javascript works as expected:

1st: listen to mousemove instead of onClick, to do it comment this line : //if (!pointer.down) return;

2nd : listen to window instead of canvas :
-canvas.addEventListener(mousemove, function)
+window.addEventListener(mousemove, function)

Next, on posX and posY change offsetX and offsetY by clientX and clientY:
-let posX = scaleByPixelRatio(e.offsetX);
-let posY = scaleByPixelRatio(e.offsetY);
+let posX = scaleByPixelRatio(e.clientX);
+let posY = scaleByPixelRatio(e.clientY);

Then, you will have to apply some changes to the function ### updatePointerMoveData :

change the canvas.width and height in these two lines :
-pointer.texcoordX = posX / canvas.width;
-pointer.texcoordY = 1.0 - posY / canvas.height;
it should be something like this :
pointer.texcoordX = posX / (canvas.width/2);
pointer.texcoordY = 1 - posY / (canvas.height/2);
This worked for me because I set the canvas size to 100vw and 100vh
these were all the changes I made and it worked fine for me, hope this helps