How to make Canvas draw animation

Question

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

Answer 1

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

Answer 2

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

Answer 3

Requet animation frame indeed will help

Answer 4

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

Answer 5

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

Answer 6

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.

Answer 7

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)

Answer 8

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

Answer 9

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