Linking source image via webflow server not working

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

I would be happy to pay anyone who can help me get this working as it’s for a client. Thank you!

Hey Rose,

I’ll try and take a look tomorrow if i get a chance, and if no one else steps in first.

No need to pay anything, looks like a cool concept.

1 Like

@rrrosegregoryyy - Your closing script tag is not valid. It should be </script>. Fix this in your code and your canvas will render.

1 Like

Thank you Jeff!!!

What a life-saver!

2 Likes