Eu ando em pesquisas e não há maneira de fazer isto trabalhar, a primeira tentativa funciona bem, mas a segunda já não, ou seja, não apaga o texto que lá estava e o substitui pelo novo (no campo correspondente), presumo que a minha função clearRect()
não esteja a levar os argumentos corretos:
var canvas = document.getElementById("myCanvas");
canvas.style.background = 'red';
var ctx = canvas.getContext("2d");
$('.define').on('click', function() {
var txt = $($(this).data('target')).val();
var txt_color = $(this).data('colortext');
var txt_size = $(this).data('fontsize');
var x = $(this).data('x');
var y = $(this).data('y');
ctx.font = txt_size+ " Arial";
ctx.fillStyle = txt_color;
ctx.clearRect(x, y, canvas.width, ctx.measureText(txt).height);
ctx.fillText(txt, x, y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas"></canvas><br>
<input id="title"><br>
<button class="define" data-target="#title" data-colortext="black" data-fontsize="30px" data-x="10" data-y="50">Definir Titulo</button><br><br>
<input id="text"><br>
<button class="define" data-target="#text" data-colortext="blue" data-fontsize="20px" data-x="10" data-y="80">Definir Texto</button>