Como limpar a área do canvas com JavaScript

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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