Animating images on html 5 canvas

Question

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

Answer 1

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)
}

Answer 2

Your code is a bit complicated, I simplified it for you to understand how it works

https://code.sololearn.com/WfFNmwPxIoR8/?ref=app

Answer 3

neo.h that doesnt seem to work

Answer 4

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);

Answer 5

neo.h look at my code whenever i clear rect the picture no longer draws

Answer 6

thanks neo.h