How to make Canvas draw animation

If we have lineTo(50, 100);, How do we animate It drawing ... (50, 100)? Here I have a line drawn already, but it's not animated (don't know how). https://code.sololearn.com/WL7sS6c3HaHJ/?ref=app

9/8/2019 5:52:53 PM


12 Answers

New Answer


Use window.requestAnimationFrame method https://code.sololearn.com/WIRUZtbG0bGG/?ref=app


https://code.sololearn.com/WtPI9miO20ig/?ref=app I hope this code will be helpful for setinterval.


Requet animation frame indeed will help




Use of setInterval or setTimeout method https://code.sololearn.com/WLNx6w5n923l/?ref=app https://code.sololearn.com/WZLu4j4XT1S8/?ref=app However you should always use requestAnimationFrame method in canvas animation in order to get smoother movement.


setInterval(1000). might work better in your case. you can increment the lines x and y position every second in a for loop. if the drawing needs to slow down you can say like setInterval (1000 / 5)


See this Dude https://code.sololearn.com/WWqTzGTtQ01V/?ref=app


Qudusayo , I know this is offtopic, but did you get your profle from somewhere, or did you make it? (I saw it on Youtube). Also, can you please show me how to do the request animation frame indeed (in the code)? Thank you


Coder , Can you show me with setInterval (in the code) please?