Desenhando Retângulos - JavaScript

Uma das formas mais comuns de trabalhar com gráficos em JavaScript é através da Canvas API, que utiliza o elemento <canvas>. Esse elemento funciona como uma área de desenho, acessível via código JavaScript, onde é possível desenhar diversas figuras, adicionar imagens, manipular vídeos e muito mais. Muitas das atuais jogos em HTML5 e JavaScript são desenvolvidos utilizando a Canvas API.

Exemplo de definição básica do elemento <canvas> em uma página web:

Normalmente, é especificado um identificador para o elemento canvas para facilitar sua seleção no código JavaScript. Além disso, é comum definir os atributos de largura e altura (se esses atributos não forem especificados, o canvas terá por padrão 300 pixels de largura e 150 pixels de altura).

Contexto de Renderização

Para manipular a área de desenho do canvas e seu conteúdo, é necessário obter o contexto de renderização usando o método getContext() do elemento canvas:

canvas.getContext(contextId, [config]);

O primeiro parâmetro obrigatório deste método é o identificador do contexto, enquanto o segundo parâmetro opcional é um objeto de configurações.

Podemos utilizar os seguintes identificadores de contexto:

2d: contexto para renderização de gráficos 2D. Ao passar este identificador para o método getContext(), ele retorna um objeto do tipo CanvasRenderingContext2D.
webgl: contexto para renderização de gráficos 3D utilizando a tecnologia WebGL versão 1. Este método retorna um objeto do tipo WebGLRenderingContext.
webgl2: contexto para renderização de gráficos 3D utilizando a tecnologia WebGL versão 2. Este método retorna um objeto do tipo WebGL2RenderingContext.

Vale mencionar que, embora todos os navegadores modernos suportem esses três contextos (especialmente os dois primeiros), o suporte ao último contexto, webgl2, começou a ser implementado a partir de 2017 e só foi adotado pelo Safari em 2021.

Exemplo de como obter o contexto 2D para desenhar gráficos bidimensionais:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

Como o WebGL tem muitas particularidades, vamos focar nosso estudo da Canvas API utilizando o contexto 2D. Para mais informações sobre WebGL, você pode consultar o guia específico sobre WebGL.

Antes de começarmos a desenhar, é importante entender como o sistema de coordenadas do canvas é organizado:

Sistema de Coordenadas do Canvas HTML5 e JavaScript

O contexto 2D é baseado em um sistema de coordenadas bidimensional. O ponto inicial desse sistema é a coordenada (0,0), localizada no canto superior esquerdo da área de desenho. Os elementos gráficos (retângulos, círculos etc.) são desenhados na área de acordo com essa coordenada inicial.

Desenhando Retângulos

Para desenhar retângulos, o objeto CanvasRenderingContext2D oferece uma série de métodos:

clearRect(x, y, w, h): limpa uma área retangular específica, cujo canto superior esquerdo está nas coordenadas x e y, com largura w e altura h.
fillRect(x, y, w, h): preenche com cor um retângulo, cujo canto superior esquerdo está nas coordenadas x e y, com largura w e altura h.
strokeRect(x, y, w, h): desenha o contorno de um retângulo sem preenchê-lo com nenhuma cor específica.

Por exemplo, vamos desenhar um retângulo simples em uma página web utilizando fillRect():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo de Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');
      context.fillRect(10, 10, 100, 100);
    </script>
  </body>
</html>

Desenho de um retângulo utilizando o método fillRect()

Aqui, preenchemos uma área retangular com 100 pixels de largura e 100 pixels de altura, cujo canto superior esquerdo está localizado na coordenada (x=10, y=10).

Por padrão, o preenchimento utiliza a cor preta. Em um próximo artigo, veremos como definir a cor.

O método fillRect() preenche a área sem desenhar uma borda, enquanto o método strokeRect faz o oposto, desenhando apenas a borda. Por exemplo, alterando o código JavaScript para:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.strokeRect(10, 10, 100, 100);

Desenho de um retângulo utilizando o método strokeRect()

Aqui, desenhamos um retângulo com as mesmas coordenadas, largura e altura, mas apenas com a borda, sem preenchimento. Assim como no preenchimento, o contorno também é desenhado em preto por padrão.

Ao contrário dos métodos strokeRect e fillRect, o método clearRect limpa uma área específica, fazendo com que essa área retorne à sua cor original, como se não tivesse sido afetada pelos métodos anteriores. Por exemplo:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect(10, 10, 100, 100);
context.clearRect(15, 15, 90, 90);

Neste caso, primeiro preenchemos a área retangular com a cor preta, depois limpamos uma área menor dentro dela utilizando clearRect():

Desenho de um retângulo utilizando o método clearRect()

Dessa forma, podemos criar composições mais complexas:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect(10, 10, 80, 80); // Desenha a cabeça
context.clearRect(20, 20, 60, 20); // Limpa espaço para os olhos
context.fillRect(30, 25, 10, 10); // Desenha o olho esquerdo
context.fillRect(60, 25, 10, 10); // Desenha o olho direito
context.clearRect(25, 60, 50, 10); // Desenha a boca

Desenho de retângulos em um canvas utilizando JavaScript