[Striker_]

Порешал вот так:

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
Слева вводим текст в поля, справа он отображается на визитке.