La etiqueta CANVAS

Permite dibujar gráficos mediante JavaScript. Es ideal para crear visualizaciones dinámicas, juegos, animaciones y manipulaciones de imágenes directamente en el navegador.

La etiqueta <canvas> permite dibujar gráficos mediante JavaScript. Es ideal para crear visualizaciones dinámicas, juegos, animaciones y manipulaciones de imágenes directamente en el navegador.

Sintaxis básica

<canvas id="miCanvas" width="600" height="400">
  Tu navegador no soporta canvas. Actualízalo.
</canvas>

Atributos:

  • width y height: Definen el tamaño del área de dibujo (¡no usar CSS para esto!).

  • Contenido interno: Mensaje alternativo para navegadores antiguos.

Configuración inicial con JavaScript

const canvas = document.getElementById('miCanvas');
const ctx = canvas.getContext('2d'); // Contexto 2D

Funcionalidades principales

Dibujar formas básicas

// Rectángulo relleno
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 100, 80); // (x, y, ancho, alto)

// Círculo
ctx.beginPath();
ctx.arc(300, 200, 50, 0, Math.PI * 2); // (x, y, radio, inicio, fin)
ctx.fillStyle = '#e74c3c';
ctx.fill();

Trabajar con texto

ctx.font = '24px Arial';
ctx.fillStyle = '#2c3e50';
ctx.fillText('¡Hola Canvas!', 150, 100);

Manipular imágenes

const img = new Image();
img.src = 'imagen.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 200); // (imagen, x, y, ancho, alto)
};

Atributos y métodos clave

Categoría Ejemplos
Estilos fillStyle, strokeStyle, lineWidth
Formas rect(), arc(), moveTo(), lineTo()
Transformaciones rotate(), scale(), translate()
Composiciones globalAlpha, globalCompositeOperation

Casos de uso avanzados

Animaciones

let x = 0;
function animar() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 100, 50, 50);
  x += 2;
  requestAnimationFrame(animar);
}
animar();

Gráficos interactivos

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, Math.PI * 2);
  ctx.fill();
});

Filtros de imagen

ctx.filter = 'grayscale(100%) blur(3px)';
ctx.drawImage(img, 0, 0);

Accesibilidad

Agregar descripción ARIA:

<canvas id="grafico" role="img" aria-label="Gráfico de ventas 2023"></canvas>

Proporcionar alternativa textual:

<canvas>
  <p>Gráfico interactivo mostrando tendencias mensuales</p>
</canvas>

Optimización de rendimiento

Redibujar solo áreas modificadas:

ctx.clearRect(x, y, ancho, alto); // En lugar de clearRect(0,0,...)

Usar requestAnimationFrame para animaciones fluidas.

Almacenar en caché rutas complejas:

const path = new Path2D();
path.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill(path);

Buenas prácticas

Siempre definir width y height en el HTML, no en CSS.

Limpiar el canvas correctamente antes de redibujar.

Desactivar suavizado cuando se necesite precisión:

ctx.imageSmoothingEnabled = false;

Errores comunes

Confundir coordenadas X/Y

// Incorrecto: (ancho, alto) en lugar de (x, y)
ctx.fillRect(100, 50); // ¡Falta altura y ancho!

Olvidar beginPath()

// Dibujará todos los arcos anteriores
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.stroke();

Fuga de memoria en animaciones

// Incorrecto: No cancelar animationFrame al salir
function animar() {
  //...
  requestAnimationFrame(animar);
}
// Correcto: Usar cancelAnimationFrame cuando sea necesario

Librerías populares

Librería Uso
Chart.js Gráficos estadísticos
PixiJS Juegos 2D y aplicaciones complejas
Fabric.js Edición interactiva de imágenes

Conclusión:

El elemento <canvas> es una herramienta poderosa para:

  • Crear visualizaciones dinámicas y juegos
  • Manipular imágenes y videos
  • Desarrollar experiencias interactivas

Requiere práctica y conocimiento de JavaScript, pero ofrece resultados profesionales. ¡Experimenta y lleva tu creatividad al siguiente nivel!

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 2px solid #2c3e50;
      margin: 20px;
    }
  </style>
</head>
<body>
  <canvas id="demo" width="600" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('demo');
    const ctx = canvas.getContext('2d');

    // Dibujar sol
    ctx.beginPath();
    ctx.arc(500, 100, 60, 0, Math.PI * 2);
    ctx.fillStyle = '#f1c40f';
    ctx.fill();

    // Dibujar montañas
    ctx.fillStyle = '#27ae60';
    ctx.beginPath();
    ctx.moveTo(0, 400);
    ctx.lineTo(200, 100);
    ctx.lineTo(400, 400);
    ctx.fill();
  </script>
</body>
</html>

Este código dibuja un paisaje simple con un sol y montañas. ¡Modifica los valores para crear tu propia escena!