Canvas delete correct text

Question

I do research and there is no way to make it work, the first try works well, but the second no longer, that is, it does not erase the text that was there and replace it with the new one (in the corresponding field), I assume that my function clearRect() is not taking the right arguments:

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>

Answer 1

I assume using the method filterText() would already work for this case, replacing the old text with a new one. Just insert the code in this way: ctx.fillText(txt, 15, canvas.height / 2 + 35). See below how it would look:

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, canvas.height);
  ctx.fillText(txt, 15, canvas.height / 2 + 35);
});

<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>

See more in the HTML5 Canvas documentation.

Answer 2

Forehead like this:

    ctx.clearRect(x, y, canvas.width, -parseInt(txt_size, 10));

The problem here is to know the height of the text inside the canvas and That’s not very easy.

As you are using pixels you can use the txt_size qu should be the height of the text and only need to reverse since the starting point of y is at the base of the text and we want to clean up.

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.textBaseline = 'bottom';
    ctx.fillStyle = txt_color;
    ctx.clearRect(x, y, canvas.width, -parseInt(txt_size, 10));
    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>