How to avoid text overlap in html5 canvas

Question

I am taking text from user and displaying on canvas. Again if the user enters another text on the same position, then the text is getting overlapped and not replaced. How do I resolve this issue?

Possible duplicate of http://stackoverflow.com/questions/3543687/how-do-i-clear-text-from-the-canvas-element — Sahal, Dec 31 '12 at 09:42

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Use `clearRect` and clear!

context.clearRect(0, 0, canvas.width, canvas.height);

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 31 '12 at 09:40

Praveen Kumar Purushothaman

160,666
24
190
242

@VijetaKarani Welcome buddy! :) – Praveen Kumar Purushothaman Dec 31 '12 at 11:06

score 0 · Answer 2 · answered Dec 31 '12 at 09:45

Depends on how you are actually painting the scene on the canvas.

What you could do to clear that text is:

If you are tracking the elements drawn on the canvas (using objects and arrays), like how object-oriented canvas frameworks do, remove that object tracking the text. During the next redraw of the scene (or a partial), the text won't get drawn.
or, for a quick and easy way to do it, draw a rectangle over the text that matches the background. It's similar to placing correction fluid over ink on paper.

How to avoid text overlap in html5 canvas

2 Answers2

Use clearRect and clear!

Use `clearRect` and clear!