Need help: Can't display transparent background in Canvas tag when load animated sprite

[lyse (Bui Tran Ngoc Duc)]

Hi there.

It’s been a while since I come back to Webflow. I’m trying to remake my portfolio and due to the nature of my job, I have to integrate animated sprite in the website.

So far, I have succeeded in putting a animated sprite in my page by cutting frames from an sprite sheet using canvas. The problem is, even though my sprites has transparent background, the image is automatically filled with white background when displayed. I have tried many ways, but am stuck now.

Here is my working website with the animation filled with white background (it’s at the page’s last section):
http://lyses-portfolio-post-2016.webflow.io/illustration2

Here is the code I’m using:
https://www.w3schools.com/code/tryit.asp?filename=FFF6XJPQKPI3

If someone has experience in this field, could you kindly provide me with help? I’m not expert in coding, so my code may looks like a mess, I’m sorry about that beforehand

[samliew (samliew.com)]

Canvas is transparent by default. You probably need to set transparency somewhere when drawing.

http://stackoverflow.com/q/4815166/584192

[lyse (Bui Tran Ngoc Duc)]

You’re right. I may have written wrongly, making it sound different than what I wanted to ask. I know that the canvas’s background is originally transparent, but when I draw the animation on it, even though the animation sprite’s background is transparent, the code automatically add white background to it.

I understand that I may need to mess around with the draw function, but I have not been able to find the method so far. I have tried the clearRect function listed in your post too, but it doesn’t seem to work.