HTML Canvas - change text dynamically

Question

I am trying to change the text on my html canvas while I type inside an input text field.

I can add the text however, if I delete and type again the new text is added on the top of the old one.

JSFIDDLE

document.getElementById('title').addEventListener('keyup', function() {
    var stringTitle = document.getElementById('title').value;
    console.log(stringTitle);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    var text_title = stringTitle;
    ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
    });

Answer 1

You can save the state of the canvas, update the content, then restore it via:

 var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); ctx.fillStyle = '#0e70d1'; ctx.fillRect(0, 0, canvas.width, canvas.height); document.getElementById('title').addEventListener('keyup', function () { ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height); var stringTitle = document.getElementById('title').value; ctx.fillStyle = '#fff'; ctx.font = '60px sans-serif'; var text_title = stringTitle; ctx.fillText(stringTitle, 15, canvas.height / 2 + 35); ctx.restore(); }); 

 <canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas> <input type="text" id="title" placeholder="Your Title" /> </br> 

Answer 2

This works. You just clear the canvas every time it's updated.

document.getElementById('title').addEventListener('keyup', function() {
    var stringTitle = document.getElementById('title').value;
    console.log(stringTitle);
    ctx.fillStyle = '#0e70d1';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '60px sans-serif';
    var text_title = stringTitle;
    ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
    });

UPDATE

In case you only want to update the area where the text is, you can do just that,

ctx.fillRect(0, 130, canvas.width, 70);

Another approach would be, keeping track of the text as well as other objects in the canvas and refreshing the entire canvas. This is not as memory intensive as you'd think. If you want, you could also reset the canvas only when the text has been deleted (completely or partially), by comparing the previous string with new one.

Answer 3

try replace last few line with this

ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);

by canvas limitation, you must redraw whole canvas in order to update its content

Answer 4

I would add your text to an array and then clear the canvas after every time you type and redraw all the text.

As the letter are different widths and so are spaces and backspaces you can't be certain you will exactly clear the letter you want to delete.