Desenhando retângulos via canvas em JavaScript

Não é necessário desenhar quadrados e retângulos usando combinações de moveTo e lineTo - existem métodos mais simples para isso. Vamos analisá-los.

Método strokeRect

O método strokeRect(x, y, largura, altura) desenha o contorno de um retângulo em um ponto determinado. Os dois primeiros parâmetros definem as coordenadas do ponto onde o canto superior esquerdo do retângulo desenhado ficará.

Vamos desenhar um retângulo usando strokeRect (assumindo que ctx já existe):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

Método fillRect

O método fillRect(x, y, largura, altura) funciona da mesma forma que strokeRect, mas desenha um retângulo preenchido. Vejamos um exemplo:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

Método rect

O próximo método rect(x, y, largura, altura) também desenha um retângulo. No entanto, este retângulo só se tornará visível se o método stroke ou fill for aplicado. No primeiro caso, será o contorno, e no segundo - a forma preenchida.

Vamos desenhar um contorno usando rect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

E agora vamos desenhar a forma preenchida:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

Método clearRect

O próximo método clearRect(x, y, largura, altura) funciona como uma borracha, limpando uma área retangular e tornando o conteúdo completamente transparente.

Vamos desenhar um quadrado usando fillRect e apagar parte dele com clearRect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: