How do I clear text from the <canvas> element?

Question

I have put text on an image in a <canvas> tag (the text was taken from an input box).

Now if I put a new text on the <canvas>, it is imposed on the previous text. How do I clear the existing text on the canvas before putting in the new text?

I have tried resetting the canvas by assigning canvas.width but the text stays on. Any help people?

Answer 1

I'm not sure about how to clear the text off the image before you put the next piece of text.

If the background of the canvas is constant; and your only changing the text you could layer two canvas elements. The background, and a transparent top layer for text that can be removed and a new one inserted when you want to update the text.

Answer 2

You will need to redraw the image before drawing the new text.

Answer 3

not sure if it would work, but you could try redrawing the text in the background color

Answer 4

You need to use clearRect(x, y, w, h); More details at MDC