Animating images on html 5 canvas | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Animating images on html 5 canvas

How do you clear the canvas and draw the image after while it moves. https://code.sololearn.com/W3Oag2193Em3/?ref=app

30th Jan 2019, 7:16 PM
Lucy
Lucy - avatar
6 Answers
+ 2
you may clear the canvas using clearRect(x, y, width, height) Or just a rectangle with the color you want as base. The clearRect removes whatever it's under the specified area, leaving it transparent. Animations are made by looping with a certain delay, and drawing each time with a slight variation. for example: setInterval(draw, 33) // each 33 milliseconds or function draw() { // update // draw stuff requestAnimationFrame(draw) }
30th Jan 2019, 7:52 PM
voidneo
+ 1
Your code is a bit complicated, I simplified it for you to understand how it works https://code.sololearn.com/WfFNmwPxIoR8/?ref=app
30th Jan 2019, 8:12 PM
voidneo
0
neo.h that doesnt seem to work
30th Jan 2019, 7:54 PM
Lucy
Lucy - avatar
0
I think it might be because I forgot to mention that the clearRect function is inside the canvas context. canvas = document.getElementById("my_canvas"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 50, 50);
30th Jan 2019, 7:58 PM
voidneo
0
neo.h look at my code whenever i clear rect the picture no longer draws
30th Jan 2019, 7:59 PM
Lucy
Lucy - avatar
0
thanks neo.h
30th Jan 2019, 8:13 PM
Lucy
Lucy - avatar