How to undraw, hide, remove, or delete an image from an html canvas?

Question

this.context.drawImage(myimage, 0, 0);

Putting the image on the canvas is pretty well covered all over the web. But how do I remove it after it's there?

Answer 1

Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.

You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.

To simplify a bit, there are generally two ways:

1. Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
2. Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.

You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.

If you want to look into libraries, take a peek at easel.js. It's pretty learnable.