Dibujar rectángulos a través de canvas en JavaScript

No es necesario dibujar cuadrados y rectángulos usando combinaciones de moveTo, lineTo - para eso hay métodos más simples. Vamos a analizarlos.

Método strokeRect

El método strokeRect(x, y, ancho, alto) dibuja el contorno de un rectángulo en el punto especificado. Los dos primeros parámetros establecen las coordenadas del punto donde estará la esquina superior izquierda del rectángulo dibujado.

Dibujemos un rectángulo usando strokeRect (asumimos que ctx ya 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

El método fillRect(x, y, ancho, alto) funciona igual que strokeRect, pero dibuja un rectángulo relleno. Veamos un ejemplo:

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

El siguiente método rect(x, y, ancho, alto) también dibuja un rectángulo. Pero 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.

Dibujemos un 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();

Результат:

Y ahora dibujemos una figura rellena:

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

El siguiente método clearRect(x, y, ancho, alto) funciona como un borrador, limpiando un área rectangular y haciendo su contenido completamente transparente.

Dibujemos un cuadradito usando fillRect y borremos una parte con 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);

Результат: