JavaScript

Como limpar a área do canvas com JavaScript

6 de janeiro de 2021

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

Como limpar a área do canvas capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x