Método rect
O método rect desenha um retângulo em um
ponto determinado. Este retângulo se tornará
visível apenas se o método stroke
ou fill for aplicado.
No primeiro caso, será o contorno, e no segundo
- a figura preenchida.
Sintaxe
contexto.rect(x, y, largura, altura)
Exemplo
Vamos desenhar um contorno usando rect:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Exemplo
E agora vamos desenhar uma figura preenchida:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Veja também
-
método
fillRect,
que desenha um retângulo preenchido -
método
strokeRect,
que desenha o contorno de um retângulo
