7
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?

John Mee
  • 50,179
  • 34
  • 152
  • 186
  • 3
    HTML5 canvas is aptly named as it behaves almost like a real canvas, you can paint (render) stuff on there but you can't remove it. You can paint over it with another image, you can clear the pixels that rendered that image, or you can clear the canvas completely. This stackoverflow answer shows how to clear just the pixels the image takes up http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5 – kreek Sep 27 '11 at 23:32
  • Thx. Now why didn't that question appear early in the search results for "[html5] [canvas] remove"? It finds it if you add "removing" to the search query, but kinda need to know what the subject line is in order to work out how to find it. – John Mee Sep 27 '11 at 23:51

3 Answers3

11

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.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
5

Option 1:
Draw a rectangle over it of the same color as the background.

Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.

groovecoder
  • 1,551
  • 1
  • 17
  • 27
someone
  • 1,468
  • 8
  • 9
  • I've gone with a "redraw" routine which clears and redraws the entire canvas when required as it's not animated or particularly resource hungry stuff. – John Mee Oct 04 '11 at 00:36
3

So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.

Patrick
  • 3,490
  • 1
  • 37
  • 64
Me3
  • 31
  • 1