+9

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

Ginfio

12 Answers

New Answer

+5

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

+7

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

+5

You can request AnimationFrame or setInterval for animation

+5

Ginfio take a look on the answer of Rajeshwari Kamatar[#Be The Way You Are] didi

+5

var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = 5; setInterval(()=>{ context.beginPath(); context.moveTo(5, 5); x+=5; // bezier curve context.lineTo(x, x); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke(); },20); Look at it for setInterval animation

+4

Requet animation frame indeed will help

+3

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

+3

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.

+3

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)

+3

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

+2

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

+2

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