Есть поле input в которое я ввожу текст. Справа от поля input картинка, на определенных координатах которой собственно и появляется вводимый текст. Пишу на HTML5 используя элемент Canvas:
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title>Test HTML5</title>
<script type="text/javascript">
function loader()
{
var name = document.getElementById('name').value;
var canvas = document.getElementById('canvas');
var canvas1 = canvas.getContext('2d');
canvas1.font = 'italic 20px sans-serif';
canvas1.strokeText(name, 180, 150);
}
</script>
</head>
<body onkeyup="loader()">
<p><h3>Enter text for front side</h3>
<form method="post" action="">
<p>Company Name</p>
<p><input type="text" name="name" id="name"></p>
</form></p>
<canvas id="canvas" width="669" height="384" style="background-image: url(img.jpg); position: absolute; left: 250px; top: 76px;"></canvas>
</body>
</html>
Вводимый текст отображается в нужных координатах на картинке, но есть проблема... Если удалять текст из input'a - выводимый текст на картинке остается и вообще если удалить текст и вписано заново - новый текст накладывается на старый. Как это исправить?