Порешал вот так:
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.clearRect(0, 0, canvas.width, canvas.height);
canvas1.strokeText(name, 180, 150);
}
Но теперь всплыла другая проблема... Дело в том что полей input на странице много, просто в примере в первом посте привел пример с одним инпутом.
Когда вношу информацию во второй инпут, текст на картинке из первого инпута пропадает и выводится текст из второго.
<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.clearRect(0, 0, canvas.width, canvas.height);
canvas1.strokeText(name, 180, 150);
}
function loader2()
{
var message = document.getElementById('message').value;
var canvas_new = document.getElementById('canvas');
var canvasl1_new = canvas_new.getContext('2d');
canvasl1_new.font = 'italic 20px sans-serif';
canvasl1_new.clearRect(0, 0, canvas_new.width, canvas_new.height);
canvasl1_new.strokeText(message, 280, 250);
}
</script>
Вообщем надо реализовать функционал так как сделно тут:
http://www.vistaprint.com/vp/ns/bcfr...ds&xnav=TopNav
Слева вводим текст в поля, справа он отображается на визитке.
