Is it possible to animate a PNG image with canvas?

Question

I saw this page and wanted to know if anyone can point us in the direction of how this was created? this moving effect in the header. https://www.jetbrains.com/

i tried something like but i dont know exactly how to make the image move and react on mouseevent.

function print_image_in_canvas(){ var logo_canvas = document.getElementById('canvas'); var x = logo_canvas.getContext('2d');

logo_canvas.width = 800; logo_canvas.height = 500;

var img = new Image(); img.src = 'Blob.png'; img.addEventListener("load", function(){x.drawImage(img,320,50)});

} window.addEventListener("load", print_image_in_canvas);

Answer 1

It's not a .png - that .png is just a background behind it - that is also there so that the entire animation area "shows" as an image to the cursor and is then available for right-click save image events.

It's a javascript animation, which has an event listener for mouseover.

Hope this helps.