Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como apagar o texto

Bom dia, fiz o meu código onde inseri mais uma canvas com o intuito de mostrar X e Y ao lado da tela. Infelizmente quando se clica na tela aparece X e Y porem se clicarmos novamente as coordenadas irão ficar novamente em cima do numero que já existia.

Existe algum comando que apague as coordenadas fillText ? Há algum outro meio de aumentar a área do canvas ?

Obrigado.

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var lapis = tela.getContext('2d');    

    lapis.fillStyle = "gray";
    lapis.fillRect(0 , 0, 400, 400);
    lapis.fillStyle = "black";
    lapis.fillRect(430, 0, 600, 400);





    function exibeAlerta(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;


        lapis.fillStyle = 'blue';
        lapis.beginPath();
        lapis.arc(x, y, 10, 0, 2 *3.14);
        lapis.fill();


        lapis.font = ' 20px Georgia';
        lapis.fillStyle = 'white';
        lapis.fillText("X = " + x, 450, 50);
        lapis.fillText("Y = " + y, 450, 100);


        console.log("valor de x = " + x);
        console.log("valor de y = " + y);
        console.log("");

    }

    tela.onclick = exibeAlerta;



</script>
2 respostas
solução!

Oi Alexandre!!

Então, como você está desenhando em um canvas, não é possível apagar o conteúdo desenhado no mesmo. Dessa forma, você pode pensar em duas soluções:

  • Desenhar um retângulo preto novamente por cima da área que você deseja escrever ou
  • Desenhar o valor antigo armazenado da cor do container antes de escrever o valor novo na cor branca.

Na primeira solução, basta você criar o retângulo novamente dentro da sua função:

lapis.fillStyle = "black";
lapis.fillRect(430, 0, 600, 400);

Já na segunda solução, você pode criar uma variável para armazenar o valor antigo, e pintá-los de preto antes de pintar o valor novo de branco antes no canvas:

<canvas width="600" height="400"></canvas>
<script>

    var tela = document.querySelector('canvas');
    var lapis = tela.getContext('2d');    

    var valorAntigoX = 0;
    var valorAntigoY = 0;

    lapis.fillStyle = "gray";
    lapis.fillRect(0 , 0, 400, 400);
    lapis.fillStyle = "black";
    lapis.fillRect(430, 0, 600, 400);

    function exibeAlerta(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        lapis.fillStyle = 'blue';
        lapis.beginPath();
        lapis.arc(x, y, 10, 0, 2 *3.14);
        lapis.fill();

        lapis.font = ' 20px Georgia';

        lapis.fillStyle = 'black';
        lapis.fillText("X = " + valorAntigoX, 450, 50);
        lapis.fillText("Y = " + valorAntigoY, 450, 100);

        lapis.fillStyle = 'white';
        lapis.fillText("X = " + x, 450, 50);
        lapis.fillText("Y = " + y, 450, 100);

        console.log("valor de x = " + x);
        console.log("valor de y = " + y);
        console.log("");

        valorAntigoX = x;
        valorAntigoY = y;

    }

    tela.onclick = exibeAlerta;
</script>

Testei as duas soluções aqui, e a primeira solução parece ser mais efetiva do que a segunda, pois após clicar muitas vezes na segunda solução, acaba ficando um resíduo branco em algumas partes do canvas. Recomendo usar a primeira solução, mas fica vou deixar as duas aqui para mostrar outras formas de pensar em como resolver esse problema!

Espero ter te ajudado! Muito sucesso e bons estudos!

Obrigado.