JavaScript | Sololearn: Learn to code for FREE!



how to animate this image on canvas? and if possible, show me in the example code

4/21/2021 9:30:31 AM

Alexander Sokolov

4 Answers

New Answer


I won't do all the work for you but first you need to load your image, I like to do it like that: const loadImage = new Promise(resolve => { const img = new Image(); img.src = src; img.onload = () => { resolve(img); }; }); const img = await loadImage("blah.jpeg"); And once you have that it's as simple as drawing a slice of your image onto another canvas. You need the 3rd overload that takes 9 parameters. You've done animations before, just draw a different slice on every 3rd frame. Your image is made of 7 slices that are the same width so that makes it easier.


The easiest option is to turn it into an animated gif and just use the <img> tag. If you actually want to use it as an animated sprite that is a completely different thing altogether and there isn't enough space for me to go into that here. See:


Martin Taylor I want to JavaScript.


Schindlabua relax :) i already found a solution.but although thanks, I'll read the article somehow.