Q:

HTML canvas change text according to input text

I want to change the text that is on a canvas. The problem that it is just adding and not removing letters as I delete them from the input.
http://jsfiddle.net/pgo8yzrc/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.change = function(val){
   ctx.restore();
   ctx.font = "20px Georgia";
   ctx.fillText(val, 10, 50);
   ctx.save();
}

<canvas id="myCanvas"></canvas>
<input type="text" onkeyup="change(this.value)" />

Why adding text working and removing is not working. can you please correct that?
Thanks

A:

Try this:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.change = function(val){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.restore();
    ctx.font = "20px Georgia";
    ctx.fillText(val, 10, 50);
    ctx.save();
}

See working example here
Upd.:
If you have background add function:
function fillBackground() {

  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, c.width, c.height);

}

Then use it before window.change and after ctx.clearRect

