HTML Canvas: Crea gráficos dinámicos con JavaScript

El elemento HTML <canvas> es una herramienta poderosa que permite a los desarrolladores web crear gráficos dinámicos e interactivos en sus páginas web. A diferencia de las imágenes estáticas, los canvas elements son superficies de mapa de bits que se pueden manipular y actualizar en tiempo real mediante código JavaScript. Esto abre un mundo de posibilidades para la creación de visualizaciones, animaciones, juegos y aplicaciones web interactivas.

En este artículo, profundizaremos en el mundo del HTML Canvas, explorando sus capacidades, atributos, métodos y ejemplos prácticos. Aprenderás cómo configurar un lienzo, dibujar formas básicas, trabajar con imágenes, aplicar estilos y animaciones, y finalmente, crear aplicaciones web visuales realmente atractivas.

Comenzando con el HTML Canvas

El primer paso para trabajar con HTML Canvas es crear el elemento <canvas> en tu archivo HTML. Este elemento actúa como un contenedor vacío para tus gráficos. Se define con atributos como id, width y height para establecer su tamaño y referencia.

«`html

«`

En este ejemplo, creamos un lienzo con el ID miCanvas y dimensiones de 500 píxeles de ancho y 300 píxeles de alto. El script dentro del elemento <script> es donde escribirás el código JavaScript para dibujar en el canvas.

Contexto 2D: El punto de partida para dibujar

Una vez que el canvas está creado, necesitas obtener su contexto 2D para poder dibujar en él. Esto se realiza mediante el método getContext("2d") aplicado al elemento canvas. El contexto 2D proporciona un conjunto de métodos y propiedades que te permiten dibujar formas, líneas, imágenes, texto y mucho más.

javascript
const canvas = document.getElementById("miCanvas");
const ctx = canvas.getContext("2d");


En este código, obtenemos una referencia al canvas con document.getElementById("miCanvas"), y luego obtenemos el contexto 2D con canvas.getContext("2d"). Ahora la variable ctx contiene el objeto de contexto que utilizaremos para dibujar.

Dibujando formas básicas

El contexto 2D ofrece una variedad de métodos para dibujar formas geométricas. Aquí se presentan algunos de los más comunes:

Rectángulos:

• fillRect(x, y, width, height): Dibuja un rectángulo relleno.
• strokeRect(x, y, width, height): Dibuja el contorno de un rectángulo.
• clearRect(x, y, width, height): Borra un área del lienzo.

Líneas:

• moveTo(x, y): Mueve el punto de dibujo a una nueva posición.
• lineTo(x, y): Dibuja una línea hasta una nueva posición.
• stroke() : Dibuja la línea actual.

Círculos:

• arc(x, y, radius, startAngle, endAngle, anticlockwise): Dibuja un arco o un círculo.

Texto:

• fillText(text, x, y): Dibuja texto relleno.
• strokeText(text, x, y): Dibuja el contorno del texto.

Ejemplo:

«`javascript
const ctx = canvas.getContext(«2d»);

// Dibujar un rectángulo relleno
ctx.fillStyle = «red»; // Establecer el color de relleno
ctx.fillRect(10, 10, 100, 50); // Dibujar el rectángulo

// Dibujar una línea
ctx.beginPath(); // Iniciar un nuevo camino
ctx.moveTo(150, 50); // Mover el punto de dibujo
ctx.lineTo(250, 150); // Dibujar una línea
ctx.stroke(); // Dibujar la línea

// Dibujar un círculo
ctx.beginPath(); // Iniciar un nuevo camino
ctx.arc(350, 100, 50, 0, 2 * Math.PI); // Dibujar un círculo
ctx.fill(); // Rellenar el círculo
«`

Este ejemplo demuestra cómo dibujar un rectángulo rojo, una línea azul y un círculo verde. Los métodos fillStyle y strokeStyle se utilizan para establecer el color de relleno y el color del contorno, respectivamente.

Trabajando con imágenes

El HTML Canvas te permite cargar y dibujar imágenes dentro del lienzo. Puedes utilizar el método drawImage() para dibujar una imagen en el canvas.

«`javascript
const image = new Image();
image.src = «imagen.png»; // Cargar la imagen

image.onload = function() { // Esperar a que la imagen se cargue
ctx.drawImage(image, 10, 10); // Dibujar la imagen en el canvas
};
«`

Este código carga una imagen llamada «imagen.png» y la dibuja en el canvas en la posición (10, 10). El evento onload garantiza que la imagen se cargue completamente antes de ser dibujada.

Estilos y efectos

Puedes aplicar estilos y efectos a los elementos que dibujas en el canvas. El contexto 2D proporciona propiedades para controlar el color, el grosor, el tipo de línea, el estilo de sombra y más.

Color:

• fillStyle: Establece el color de relleno.
• strokeStyle: Establece el color del contorno.
• shadowColor: Establece el color de la sombra.

Grosor y tipo de línea:

• lineWidth: Establece el grosor de la línea.
• lineCap: Establece el estilo del extremo de la línea (redondo, cuadrado, etc.).
• lineJoin: Establece el estilo de unión de dos líneas.

Sombra:

• shadowOffsetX: Establece el desplazamiento horizontal de la sombra.
• shadowOffsetY: Establece el desplazamiento vertical de la sombra.
• shadowBlur: Establece el desenfoque de la sombra.

Ejemplo:

«`javascript
ctx.strokeStyle = «blue»; // Establecer el color del contorno
ctx.lineWidth = 5; // Establecer el grosor de la línea
ctx.lineCap = «round»; // Establecer el estilo del extremo de la línea

ctx.shadowColor = «gray»; // Establecer el color de la sombra
ctx.shadowOffsetX = 5; // Establecer el desplazamiento horizontal de la sombra
ctx.shadowOffsetY = 5; // Establecer el desplazamiento vertical de la sombra
ctx.shadowBlur = 10; // Establecer el desenfoque de la sombra

// Dibujar una línea
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();
«`

Este ejemplo muestra cómo aplicar estilos y efectos a una línea. La línea tendrá un color azul, un grosor de 5 píxeles, un extremo redondeado, y una sombra gris con un desplazamiento de 5 píxeles y un desenfoque de 10 píxeles.

Animaciones con Canvas

El HTML Canvas es ideal para crear animaciones. Puedes actualizar el contenido del canvas repetidamente utilizando un bucle setInterval() o requestAnimationFrame(), lo que te permite crear movimientos suaves y efectos especiales.

Ejemplo:

«`javascript
let x = 10;

function animar() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar el canvas

ctx.fillStyle = «red»;
ctx.fillRect(x, 10, 50, 50); // Dibujar un rectángulo rojo

x++; // Incrementar la posición x del rectángulo

requestAnimationFrame(animar); // Llamar a la función de animación en el próximo frame
}

animar(); // Iniciar la animación
«`

Este código crea una animación simple que mueve un rectángulo rojo horizontalmente a través del canvas. La función animar() se llama repetidamente mediante requestAnimationFrame(), lo que garantiza una sincronización suave con la frecuencia de actualización del navegador.

Más allá de las formas básicas

El HTML Canvas ofrece un conjunto de métodos y propiedades que te permiten crear gráficos complejos y efectos especiales. Puedes utilizar el contexto 2D para:

• Crear gradientes: Utilizar createLinearGradient() y createRadialGradient() para crear gradientes lineales y radiales, respectivamente.
• Aplicar patrones: Utilizar createPattern() para crear patrones basados en imágenes o gradientes.
• Transformar objetos: Utilizar translate(), rotate(), scale() y transform() para mover, rotar y escalar objetos.
• Crear efectos especiales: Utilizar globalCompositeOperation para combinar imágenes y crear efectos como superposición, multiplicación y diferencia.

Conclusión

El HTML Canvas es una herramienta versátil que te permite crear gráficos dinámicos, animaciones, visualizaciones, juegos y mucho más en tus páginas web. Mediante el uso de JavaScript, puedes manipular y actualizar el contenido del canvas en tiempo real, creando experiencias web interactivas y visualmente atractivas.

Explora las posibilidades del HTML Canvas y descubre cómo puedes utilizarlo para llevar tus proyectos web al siguiente nivel.