Método rect
El método rect dibuja un rectángulo en un
punto dado. Este rectángulo se volverá visible
solo si se aplica el método stroke
o fill.
En el primer caso será un contorno, y en el segundo
- una figura rellena.
Sintaxis
contexto.rect(x, y, ancho, alto)
Ejemplo
Dibujemos un 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();
:
Ejemplo
Y ahora dibujemos una figura rellena:
<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();
:
Ver también
-
método
fillRect,
que dibuja un rectángulo relleno -
método
strokeRect,
que dibuja el contorno de un rectángulo
