3

Boas, por exemplo eu tenho dois retângulos desenhados no canvas:

const canvas = document.getElementById('canvas')

const context = canvas.getContext('2d');

context.fillRect(20,20,150,100);
context.fillRect(300,300,150,100);
<canvas id="canvas" width="600px" height="600px"></canvas>

Como posso fazer para apagar apenas um em específico? E como posso associar eventos a um deles em específico?

1 Resposta 1

3

Como posso fazer para apagar apenas um em específico? E como posso associar eventos a um deles em específico?

Não pode. Ao menos não facilmente. Pense no canvas como se fosse a tela em um programa como o Paint onde você está pintando pixels e não há nenhum tipo de Ctrl+Z. Ou então como um papel cheio de tinta no qual você está desenhando/pintando. A única forma de apagar parte do desenho é desenhando outra coisa por cima dele, mesmo se essa outra coisa for um retângulo de cor branca ou coisa assim.

O método context.fillRect é apenas algo que pinta um monte de pixels dentro do canvas. Poderia ser implementado como um par de laços for percorrendo a área correspondente e setando a cor dos pixels. O objeto equivalente ao retângulo nem mesmo chega a existir, nem antes, nem durante e nem depois dessa chamada.

O melhor que você pode fazer é inventar objetos que representem o que vai ser desenhado no canvas e então utilizar uma função que desenhe tais objetos. E então você associa eventos a esses objetos. Para apagar um deles, você redesenha o canvas inteiro a partir do zero sem o objeto removido.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .