5js mouse interaction offset

Custom code
1

Hej!
I am trying to implement this script for a mouse interaction. If I disable RM’s “scale layout” it works great, also no problem on the mobile, but with the “scale layout” enabled (which I would like to keep), the interaction is offset from the cursor and trails further away from it as it goes down and right on screen. I understand it has something to do with zoom but I cannot figure out how to amend my code for a solution (even a hacky one). Pls help!

link to page:

x, Katri

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

<script>
	setTimeout(function() {
	  const container = document.querySelector('[data-id="663cb25c5126de0021b88ffb"]');
	  new p5((p) => {
	    let canvas;
	
	    p.setup = function() {
	      canvas = p.createCanvas(container.clientWidth, container.clientHeight);
	      canvas.parent(container);
	      p.background('#fbf8f3');
	    };
	
	    p.draw = function() {
	      if (p.mouseIsPressed) {
	        sprayPaint(p);
	      }
	    };
	
	    function sprayPaint(p) {
	      p.stroke(0, 0, 0, 255);
	      p.strokeWeight(1);
	      const mouseXAdjusted = p.mouseX - canvas.elt.offsetLeft;
	      const mouseYAdjusted = p.mouseY - canvas.elt.offsetTop;
	      const speed = p.abs(mouseXAdjusted - p.pmouseX) + p.abs(mouseYAdjusted - p.pmouseY);
	      const minRadius = 10;
	      const sprayDensity = 80;
	      const r = speed + minRadius;
	      const rSquared = r * r;
	      const lerps = 10;
	
	      for (let i = 0; i < lerps; i++) {
	        const lerpX = p.lerp(mouseXAdjusted, p.pmouseX, i / lerps);
	        const lerpY = p.lerp(mouseYAdjusted, p.pmouseY, i / lerps);
	        for (let j = 0; j < sprayDensity; j++) {
	          const randX = p.random(-r, r);
	          const randY = p.random(-1, 1) * p.sqrt(rSquared - randX * randX);
	          p.point(lerpX + randX, lerpY + randY);
	        }
	      }
	    }
	
	  }, '[data-id="663cb25c5126de0021b88ffb"]');
	}, 500);
	</script>```
2

SOLVED!
To anyone interested, I solved it by adapting the code to embed as iframe.
Here is the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script>
        setTimeout(function() {
            const container = document.body; // Using body as container for simplicity
            function getZoomLevel() {
                const style = window.getComputedStyle(container);
                const transform = style.transform || style.webkitTransform || style.mozTransform;

                if (transform && transform !== 'none') {
                    const match = transform.match(/matrix\(([^,]+),[^,]+,[^,]+,[^,]+,[^,]+,[^,]+\)/);
                    if (match && match[1]) {
                        return parseFloat(match[1]); // Return the scale component of the matrix transform
                    }
                }
                return 1; // Return default scale if no scaling is applied or transform is 'none'
            }
            const zoomLevel = getZoomLevel();
            new p5((p) => {
                let canvas;

                p.setup = function() {
                    canvas = p.createCanvas(window.innerWidth, window.innerHeight);
                    canvas.parent(container);
                    p.background('#fbf8f3');
                };

                p.draw = function() {
                    if (p.mouseIsPressed) {
                        sprayPaint(p);
                    }
                };

                function sprayPaint(p) {
                    p.stroke(0, 0, 0, 255);
                    p.strokeWeight(1);
                    const mouseXAdjusted = p.mouseX - canvas.elt.offsetLeft;
                    const mouseYAdjusted = p.mouseY - canvas.elt.offsetTop;
                    const speed = p.abs(mouseXAdjusted - p.pmouseX) + p.abs(mouseYAdjusted - p.pmouseY);
                    const minRadius = 10;
                    const sprayDensity = 80;
                    const r = speed + minRadius;
                    const rSquared = r * r;
                    const lerps = 10;

                    for (let i = 0; i < lerps; i++) {
                        const lerpX = p.lerp(mouseXAdjusted, p.pmouseX, i / lerps) * zoomLevel;
                        const lerpY = p.lerp(mouseYAdjusted, p.pmouseY, i / lerps) * zoomLevel;
                        for (let j = 0; j < sprayDensity; j++) {
                            const randX = p.random(-r, r);
                            const randY = p.random(-1, 1) * p.sqrt(rSquared - randX * randX);
                            p.point(lerpX + randX, lerpY + randY);
                        }
                    }
                }
            });
        }, 2000);
    </script>```