Question

Here’s my project: http://jsfiddle.net/fknjz/17/

When I type in the textboxes under the canvas and click “UPDATE”, it works and add the text in the canvas. But every time I click UPDATE, it adds the textbox content over the content typed before. So the text in the canvas starts stacking up on each other.

What I need is to modify the text in the Canvas so that when I click UPDATE, it actually updates the text, not create a new text line of text over the old one.

Any idea how to do it?

Answer 1

You could clear the canvas like so:

canvas.width = canvas.width;

See updated fiddle. Note that you need to redraw the image each time since the canvas is completely cleared.

Or, as suggested by apsillers and Joceyln, use the clearRect method of canvas. This, however, will require you to calculate the area of the rectangle you want to clear which may need to vary depending on the amount of text the user enters and will remove sections of the image you have drawn in the background (which may not be an issue if it’s always going to be a white background).