HTML Canvas изменить текст в соответствии с вводимым текстом

Question

Я хочу изменить текст на холсте.Проблема в том, что он просто добавляет, а не удаляет буквы, поскольку я удаляю их из ввода.

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)" />

Почему добавление текста работает, а удаление не работает.Вы можете исправить это?

Спасибо

Answer 1

  **Please try this :**

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

  **The clearRect() method sets the pixels in a rectangular area to transparent black 
  (rgba(0,0,0,0)). The rectangle's corner is at (x, y), and its size is specified by 
  width and height.**
  x
  The x-axis coordinate of the rectangle's starting point.
  y
  The y-axis coordinate of the rectangle's starting point.
  width
  The rectangle's width. Positive values are to the right, and negative to the left.
  height
  The rectangle's height. Positive values are down, and negative are up.

Answer 2

Попробуйте:

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

См. Рабочий пример здесь

Upd.: Если у вас есть функция добавления фона:

function fillBackground() {

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

}

Затем используйте его до window.change и после ctx.clearRect