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);
    });

Solution 1

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.

Solution 2

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>

Comments

[SNos]

This works however, if I have something else on the canvas it will clear everything else is on there

[Shashwat Black]

In that case you only clear the area where the text is. I'll update the answer, just a moment.

[Kaiido]

why save() and restore() ?

[j08691]

@Kaiido - It's something I've used for a while, mostly with canvas transformations, but I've found it works equally well with simple redraws.

[Kaiido]

Actually it will eventually only save your fillStyle and font properties (not even sure about it) and are quite consumptive methods, you should avoid if you're not dealing with transformations

[Shashwat Black]

@Kaiido In this case, these are very necessary, because once the fillstyle gets changed to #fff the fillRect, in the next call, would fill the canvas with white, which is not something we want. save and restore are very convenient when using transformations.

[markE]

@j08691. context.save & context.restore will save and restore the entire context state (eg all stylings, transformations, composite settings, etc). Since .save & .restore are modestly expensive you might instead begin with var previousFill=ctx.fillStyle and end by resetting just the fillStyle with ctx.fillStyle=previousFill. :-)

[Kaiido]

@ShashwatBlack I think it's a better practice to just reset the fillStyle to the color you want every time you draw something, it will avoid some other external errors

[Shashwat Black]

I agree with you. In this case it is an overkill. ;)

[Kaiido]

what about ctx.measureText()