Canvas erase correct text

Navigation
6

I go through a search and there is no way to make it work, the first attempt works fine, but the second does not, that is, does not delete the text that was there and replace it with the new one (in the corresponding field), I assume that my clearRect() function is not carrying the correct 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><canvasid="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>
    
asked by anonymous 19.01.2017 / 15:48

2 answers

2

Test like this: 

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

The problem here is knowing the height of the text inside the canvas and this is not very easy .

Since you are using pixels, you can use txt_size qu should be the height of the text and you 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><canvasid="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>
    
26.01.2017 / 16:19
3

I assume that using the filterText() method would already work for this case, replacing the old text with a new one . Just enter the code 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><canvasid="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 HTML5 Canvas documentation .

    
19.01.2017 / 16:07
Relation of Java types or another language with processor architecture Scope, nested functions, function call