Neste artigo você vai aprender a como limpar a área do canvas via JavaScript, de uma maneira simples e fácil para utilizar em seus projetos
Fala programador(a), beleza? Bora aprender mais sobre canvas e também apagar a o que está no canvas
A funcionalidade é bem simples de ser executada, vamos utilizar context e o método clearRect
Veja a aplicação prática:
context.clearRect(0, 0, canvas.width, canvas.height);
Desta maneira você terá qualquer objeto desenhado no canvas removido e a área dele limpa
Podemos atrelar a um evento também a limpeza, veja o exemplo:
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);Aqui aplicamos a funcionalidade de limpar o canvas em um botão com id de clear
Diferente da primeira opção, esta será acionada após o evento ser concluído por meio de algum usuário
Os parâmetros de clearReact correspondem a:
- x: O valor da coordenada x para o ponto inicial do retângulo
- y: O valor da coordenada y para o ponto inicial do retângulo
- width: largura do retângulo
- height: altura do retângulo
Em sua definição o método limpa todos os pixels de um retângulo definido na posição, x e y, e tamanho, largura e altura, apagando algum conteúdo anterior
Este trecho foi retirado da documentação do MDN, que é uma ótima referência para JavaScript em geral e suas bibliotecas
Conclusão
Neste artigo aprendemos a como limpar a área do canvas via JavaScript
Utilizamos a função clearReact, que zera os parâmetros do canvas e faz a limpeza
Removendo qualquer elemento ou objeto que esteja no mesmo
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube