Редактировать текст на холсте HTML5 с jQuery

Question

Я знаю, что canvas не может редактировать текст из поля.

Я пытаюсь сделать это http://jsfiddle.net/0n60y65o/4/

$(document).ready(function() { 
    var canvas = $('#cEditor')[0]; 
    var context = canvas.getContext('2d'); 
    var newTxt = 'Your text here'; 

    createTxt(); 

    $('input[data-selector="inputName"]').bind('change', function() { 
     var newVal = $(this).val(); 
     changeTxt(newVal); 
    }); 

    function createTxt() { 
     context.translate(canvas.width/2, canvas.height/2); 
     context.font = '18pt Calibri'; 
     context.textAlign = 'center'; 
     context.fillStyle = '#000'; 
     context.fillText(newTxt, 0, 0); 
    } 

    function changeTxt(newVal) { 
     newTxt = newVal; 
     context.save(); 
     context.fillText(newTxt, 0, 0); 
     context.restore(); 
    }; 
}); 

но это может сделать новый текст на холсте не изменить текст на холсте.

Я надеюсь, что кто-то сказать мне рабочий процесс и компонент для редактора сборки этого сайта http://customerscanvas.com/demos/Editor.aspx?header=1-sided%20Business%20Card&design=BusinessCard1&downloadEnabled=true&backgroundButtonEnabled=true&rectEllipseButtonsEnabled=false (жаль, что я не спам, это, например, живой сайт) На этом сайте, вы можете изменить стиль/редактировать текст, добавить текст, добавьте изображение и т. д.

Answer 1

Вы должны очистить холст, что можно сделать, чтобы сбросить ширину и перерисовать текст, так что в основном вы могли бы сделать то же самое, что и при первом создании его, каждый раз изменения текста, как это:

$(document).ready(function() { 
    $('input[data-selector="inputName"]').on('input', createTxt).trigger('input'); 

    function createTxt() { 
     var canvas = document.getElementById('cEditor'); 
     var context = canvas.getContext('2d'); 

     canvas.width = canvas.width; 
     context.translate(canvas.width/2, canvas.height/2); 
     context.font = '18pt Calibri'; 
     context.textAlign = 'center'; 
     context.fillStyle = '#000'; 
     context.fillText(this.value, 0, 0); 
    } 
}); 

FIDDLE