Hello!
I am trying to set up a canvas in my page that draws an image when the mouse moves (see example tutorial here: https://www.superhi.com/video/mouse-move-glitch-collage-using-html-canvas
When I host the image locally I can make it work using this HTML & JS:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvasTag = document.getElementById("myCanvas");
canvasTag.width = window.innerWidth * 2
canvasTag.height = window.innerHeight * 2
canvasTag.style.width = window.innerWidth + 'px'
canvasTag.style.height = window.innerHeight + 'px'
const context = canvasTag.getContext('2d')
context.scale(2, 2)
const image = document.createElement('img')
image.src = 'https://uploads-ssl.webflow.com/5f4c8ec0485039ac198b0458/5f5522e2d20ccc40fc223a3a_600px_poster3.jpg'
document.addEventListener('mousemove', function(event) {
if (image.complete) {
context.drawImage(image, event.pageX, event.pageY, 400, 600)
}
})
<script/>
But when I try to put it into Webflow (via an HTML embed in the page), using the image.src as the link generated from the image in my Webflow assets, it doesn’t work.
Is there a way to fix this?
I am happy to pay for someone’s time to make this work and explain it to me!
Thank you!!
Here is my site Read-Only: https://preview.webflow.com/preview/bp-rg-test?utm_medium=preview_link&utm_source=designer&utm_content=bp-rg-test&preview=9336cb3f4db29b78374de89a80f542b1&pageId=5f5bcb0db698ff675964e8be&mode=preview