En este artículo vamos a explicar cómo dibujar rectángulos en HTML5 Canvas mediante código JavaScript sencillo. Esta figura es la piedra angular para estructurar mapas, delimitar áreas de colisión en videojuegos o generar paneles limpios dentro de tus aplicaciones interactivas.
Dibujar rectángulos en HTML5 Canvas es una de las tareas más recurrentes al estructurar escenarios en dos dimensiones. Esta figura geométrica te servirá para definir cajas de colisión para tus personajes, delimitar botones interactivos o pintar fondos modulares en tus aplicaciones.
Crear un lienzo canvas
Lo primero que necesitamos es configurar nuestro documento HTML con un elemento Canvas, el cual nos proporcionará una área gráfica para dibujar, comúnmente llamado lienzo canvas. Un ejemplo básico sería el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rectángulos en HTML5 Canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="miCanvas" width="800" height="600">Canvas no soportado</canvas>
</body>
</html>En este ejemplo hemos creado un lienzo HTML5 Canvas con las etiquetas <canvas></canvas> y los siguientes atributos:
- ID Es un identificador único para referirnos al lienzo desde JavaScript y dibujar en él
- width, height Son las dimensiones en píxeles de nuestro lienzo o ventana gráfica
- El texto entre las etiquetas sólo se mostrará si el navegador no soporta la tecnología de dibujo HTML5 Canvas
Dibujo de rectángulos en HTML5 Canvas
Ahora vamos a crear el código JavaScript para dibujar un rectángulo en nuestro Canvas HTML5. Este código JavaScript vamos a insertarlo justo debajo de las etiquetas <canvas></canvas>:
<script>
// Obtener el elemento Canvas
let canvas = document.getElementById("miCanvas");
// Obtener el contexto de dibujo 2D
let ctx = canvas.getContext("2d");
// Definir propiedades del rectángulo
let x = canvas.width / 2;
let y = canvas.height / 2;
let ancho = 300;
let alto = 200;
// Comenzar el trazado del rectángulo
ctx.beginPath();
// Dibuja el rectángulo
ctx.rect(x, y, ancho, alto);
// Establece el color de relleno
ctx.fillStyle = "green";
// Rellena el rectángulo
ctx.fill();
// Establece el color del borde
ctx.strokeStyle = "black";
// Establece el ancho del borde en píxeles
ctx.lineWidth = 4;
// Dibuja el borde del rectángulo
ctx.stroke();
// Finaliza el trazado del rectángulo
ctx.closePath();
</script>Con este código dibujamos un rectángulos utilizando la API gráfica JavaScript que nos proporcionan HTML5 y Canvas. Para ello realizamos unas cuantas acciones:
- Obtiene el elemento Canvas y su contexto de dibujo 2D.
- Define las propiedades del rectángulo, como las coordenadas del extremo superior izquierdo (
x,y), el ancho y el alto. - Comienza un nuevo trazado con
beginPath(). Esto es importante para indicar el inicio de un nuevo trazado, de lo contrario, el navegador mantiene el trazado anterior y podríamos sumar trazados. - Dibuja el rectángulo con
rect(), especificando las coordenadas del extremo superior izquierdo, el ancho y la altura. - Establece el color de relleno y llena el rectángulo con
fill(). - Establece el color del borde, el ancho del borde y dibuja el borde con
stroke(). - Finaliza el trazado del rectángulo con
closePath().
Al abrir el archivo HTML en un navegador, deberías ver el lienzo canvas enmarcado con un borde negro y en su interior un rectángulos verde con un borde negro de 2 píxeles. La esquina superior izquierda del rectángulo está en el centro del Canvas.
Rectángulos con fillRect()
La API JavaScript de Canvas también nos proporciona un método directo para dibujar un rectángulo relleno independientemente del trazado actual. Este detalle es importante porque nos ahorra las instrucciones beginPath() y fill() sin entorpecer el trazado que estemos llevando a cabo.
ctx.fillRect(x, y, width, height);El método fillRect() dibuja un rectángulo relleno cuyo punto inicial está en (x, y) y el tamaño se especifica mediante el ancho y el alto. El estilo de relleno está determinado por el atributo fillStyle actual.
Ahora que tenemos una base para dibujar rectángulos en HTML5 Canvas con JavaScript, podemos experimentar ajustando las propiedades del rectángulos, posición, tamaño y colores para crear diferentes efectos visuales.
Este artículo forma parte de la serie Introducción a los gráficos web, una guía práctica sobre HTML5, la etiqueta <canvas> y su aplicación en el desarrollo de videojuegos.
¡ Espero que este artículo sea de vuestro interés !
