HTML5 Remove previous drawn object in canvas

Question

I have a polygon object (say a car) drawn inside a HTML5 canvas with help of methods moveTo and lineTo. I want to repeatedly draw that object at different positions in the canvas (simulating a moving object). My problem is that the previous drawn object is not getting cleared. Instead, multiple images are drawn on the canvas. How can I fix this issue?

Answer 1

Canvases are just arrays of pixels, they know nothing of the shapes you have drawn.

There are animation tricks that used to be used on bitmapped displays (e.g. "xor drawing") that can be used to remove the old shape before you draw the new one, but on modern machines it's generally far simpler (and perfectly fast) to just erase the canvas and start again for each frame.

Given your comments to other answers, I'd suggest just using two Canvases - one for the static background and one for the car. If the background image is static it could even be an <img> element instead of a Canvas.

If the car image is static you could also just draw that once, and then use CSS positioning to set its position relative to the background for each frame.

Answer 2

You have to clear the canvas at the start of every draw frame

context.clearRect(0, 0, canvas.width, canvas.height);