Clear a portion in Canvas

Question

I am creating an animation in Canvas. Initially, the Canvas will have a set of images drawn on it. After certain time, say 5 seconds, an image has to be cleared from its original place and drawn at a separate place.

To clear the image, I tried using context.clearRect() to clear the portion, but no luck. Is there any other way to do this?

Answer 1

clearRect is the right way. Note that if you have a transformation applied, it may be clearing a different rectangle in the canvas. You can always remedy this by using:

// I have lots of transforms right now
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Will always clear the right space
ctx.clearRect(x, y, width, height);
ctx.restore();
// Still have my old transforms