SVG y Canvas en HTML

Introducción a gráficos vectoriales SVG

SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales basado en XML que permite crear imágenes que mantienen su calidad independientemente del tamaño al que se visualicen. A diferencia de los formatos de imagen rasterizados como JPG o PNG, los gráficos SVG no pierden calidad al ampliarse, ya que se componen de formas matemáticas en lugar de píxeles.

¿Qué es un gráfico vectorial?

Un gráfico vectorial se define mediante ecuaciones matemáticas en lugar de una cuadrícula de píxeles. Esto significa que:

• Se puede escalar a cualquier tamaño sin pérdida de calidad
• Suele tener un tamaño de archivo menor para gráficos simples
• Es ideal para logotipos, iconos y diagramas

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Este código crea un círculo amarillo con borde verde. Lo importante es que podríamos cambiar los valores de width y height a "1000" y el círculo seguiría viéndose nítido, sin pixelarse.

Estructura básica de un SVG

Un documento SVG comienza con la etiqueta <svg> que define un lienzo donde se dibujarán los elementos gráficos:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Aquí van las formas y elementos gráficos -->
</svg>

Los atributos esenciales son:

• width y height: definen el tamaño del lienzo
• xmlns: especifica el espacio de nombres de SVG (siempre necesario)

Formas básicas en SVG

SVG proporciona varias formas predefinidas que puedes utilizar para crear gráficos:

• Rectángulo: <rect>
• Círculo: <circle>
• Elipse: <ellipse>
• Línea: <line>
• Polilínea: <polyline>
• Polígono: <polygon>
• Ruta: <path> (la más versátil y potente)

Veamos ejemplos de algunas formas básicas:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Rectángulo -->
  <rect x="10" y="10" width="100" height="50" fill="blue" />
  
  <!-- Círculo -->
  <circle cx="180" cy="35" r="25" fill="red" />
  
  <!-- Línea -->
  <line x1="10" y1="100" x2="110" y2="100" stroke="green" stroke-width="3" />
  
  <!-- Polígono (triángulo) -->
  <polygon points="180,100 155,150 205,150" fill="purple" />
</svg>

En este ejemplo:

• El rectángulo se posiciona en (10,10) con ancho 100 y alto 50
• El círculo tiene su centro en (180,35) con radio 25
• La línea va desde el punto (10,100) hasta (110,100)
• El polígono crea un triángulo conectando tres puntos

Estilizando elementos SVG

Puedes aplicar estilos a los elementos SVG usando atributos específicos:

• fill: color de relleno
• stroke: color del borde
• stroke-width: grosor del borde
• opacity: transparencia del elemento
• fill-opacity y stroke-opacity: transparencia específica para relleno o borde

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="180" height="80" 
        fill="lightblue" 
        stroke="navy" 
        stroke-width="4" 
        opacity="0.8" 
        rx="10" ry="10" />
</svg>

Este código crea un rectángulo con esquinas redondeadas (gracias a rx y ry), relleno azul claro, borde azul marino y ligera transparencia.

Texto en SVG

Puedes incluir texto dentro de tus gráficos SVG usando la etiqueta <text>:

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="50" font-family="Arial" font-size="24" fill="darkblue">
    Hola, soy un texto SVG
  </text>
</svg>

Los atributos principales para el texto son:

• x e y: posición del texto
• font-family: tipo de letra
• font-size: tamaño de la fuente
• text-anchor: alineación del texto (start, middle, end)

Agrupando elementos con <g>

La etiqueta <g> (grupo) permite agrupar varios elementos SVG para aplicarles transformaciones o estilos comunes:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g fill="orange" transform="rotate(45 100 100)">
    <rect x="70" y="70" width="60" height="60" />
    <circle cx="100" cy="100" r="40" />
  </g>
</svg>

En este ejemplo, tanto el rectángulo como el círculo:

• Tienen relleno naranja (heredado del grupo)
• Están rotados 45 grados alrededor del punto (100,100)

Rutas avanzadas con <path>

El elemento <path> es la herramienta más versátil de SVG, permitiendo crear formas complejas mediante comandos de dibujo:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,50 Q 100,10 190,50 T 190,150 Q 100,190 10,150 Z" 
        fill="lightgreen" stroke="green" stroke-width="3" />
</svg>

El atributo d contiene los comandos de dibujo:

• M: Move to (mover a un punto)
• L: Line to (línea hasta un punto)
• Q: Quadratic curve (curva cuadrática)
• C: Cubic curve (curva cúbica)
• Z: Close path (cerrar ruta)

Ventajas de usar SVG

• Escalabilidad: mantiene la nitidez a cualquier tamaño
• Accesibilidad: puede incluir texto y atributos ARIA
• Interactividad: los elementos pueden responder a eventos
• Animación: los elementos pueden animarse con CSS o JavaScript
• Tamaño reducido: para gráficos simples, suelen pesar menos que imágenes rasterizadas
• Editable: se puede modificar con un editor de texto o mediante JavaScript

Ejemplo práctico: Creando un icono simple

Veamos cómo crear un icono de "casa" usando SVG:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Techo -->
  <polygon points="10,50 50,10 90,50" fill="#8B4513" />
  
  <!-- Estructura principal -->
  <rect x="20" y="50" width="60" height="40" fill="#D2B48C" />
  
  <!-- Puerta -->
  <rect x="40" y="60" width="20" height="30" fill="#4B2D10" />
  
  <!-- Ventana -->
  <rect x="25" y="60" width="10" height="10" fill="#87CEEB" />
  <rect x="65" y="60" width="10" height="10" fill="#87CEEB" />
</svg>

Este ejemplo muestra cómo combinar formas básicas para crear un dibujo más complejo. El atributo viewBox define el sistema de coordenadas interno del SVG, permitiendo que se adapte a diferentes tamaños.

Optimización de SVG

Para un uso eficiente en la web, es recomendable optimizar los archivos SVG:

• Eliminar metadatos innecesarios
• Reducir la precisión decimal de las coordenadas
• Simplificar rutas complejas
• Usar herramientas de optimización como SVGO

Un SVG optimizado puede reducir su tamaño hasta un 50% sin pérdida visual perceptible.

Inserción de SVG inline vs elementos img

Existen dos métodos principales para incorporar gráficos SVG en una página web: directamente en el código HTML (inline) o como recursos externos mediante la etiqueta <img>. Cada enfoque tiene sus propias ventajas y casos de uso específicos.

SVG inline (embebido)

El método inline consiste en insertar el código SVG directamente dentro del documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Inline Example</title>
</head>
<body>
    <h1>SVG Inline</h1>
    
    <svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
        <rect x="25" y="25" width="100" height="100" fill="#4285f4" />
        <circle cx="75" cy="75" r="40" fill="#ea4335" />
    </svg>
</body>
</html>

Ventajas del SVG inline:

• Manipulación con CSS: Puedes aplicar estilos directamente a los elementos internos del SVG.

<style>
    svg rect {
        fill: #4285f4;
    }
    svg rect:hover {
        fill: #34a853;
        transition: fill 0.3s ease;
    }
</style>

• Interactividad con JavaScript: Puedes acceder y manipular los elementos SVG mediante el DOM.

<script>
    const circle = document.querySelector('svg circle');
    circle.addEventListener('click', function() {
        this.setAttribute('r', this.getAttribute('r') == 40 ? 50 : 40);
    });
</script>

• Animaciones CSS: Puedes animar elementos SVG con transiciones y animaciones CSS.

<style>
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }
    
    svg circle {
        animation: pulse 2s infinite;
        transform-origin: center;
    }
</style>

• Sin solicitudes HTTP adicionales: Al estar incluido en el HTML, no requiere peticiones adicionales al servidor.

Desventajas del SVG inline:

• Aumenta el tamaño del documento HTML
• No se almacena en caché como un recurso separado
• Puede hacer que el código HTML sea menos legible
• Mantenimiento más complejo si el mismo SVG se usa en múltiples páginas

SVG como imagen (<img>)

El segundo método consiste en referenciar un archivo SVG externo utilizando la etiqueta <img>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG as Image Example</title>
</head>
<body>
    <h1>SVG as Image</h1>
    
    <img src="icon.svg" alt="Colorful icon" width="150" height="150">
</body>
</html>

Donde icon.svg sería un archivo separado con el siguiente contenido:

<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect x="25" y="25" width="100" height="100" fill="#4285f4" />
    <circle cx="75" cy="75" r="40" fill="#ea4335" />
</svg>

Ventajas de usar <img>:

• El archivo SVG se almacena en caché por el navegador
• Código HTML más limpio y fácil de mantener
• Reutilización del mismo recurso en múltiples lugares
• Separación de responsabilidades entre contenido y presentación
• Compatibilidad con navegadores más antiguos (como imagen de respaldo)

<img src="icon.svg" alt="Colorful icon" width="150" height="150" 
     onerror="this.src='icon.png'; this.onerror=null;">

Desventajas de usar <img>:

• Limitaciones de interactividad: No puedes manipular los elementos internos con CSS o JavaScript
• Restricciones de estilo: No puedes cambiar colores o propiedades de los elementos internos
• Problemas de seguridad: Algunos navegadores restringen las funcionalidades de SVG en <img> por razones de seguridad

Métodos alternativos de inserción

Además de los dos métodos principales, existen otras formas de incorporar SVG:

Usando <object>

<object data="icon.svg" type="image/svg+xml" width="150" height="150">
    <!-- Contenido alternativo si SVG no es soportado -->
    <img src="icon.png" alt="Colorful icon" width="150" height="150">
</object>

Ventajas:

• Permite interactividad con JavaScript
• Proporciona fallback para navegadores sin soporte SVG
• El SVG se almacena en caché

Desventajas:

• Más complejo que usar <img>
• Puede tener problemas de estilo en algunos navegadores

Usando <iframe>

<iframe src="icon.svg" width="150" height="150" style="border: none;"></iframe>

Ventajas:

• El SVG funciona como un documento independiente
• Permite scripts internos en el SVG

Desventajas:

• Aislamiento del DOM principal
• Problemas de accesibilidad
• Rendimiento potencialmente inferior

Usando CSS como fondo

<div class="svg-background"></div>

<style>
    .svg-background {
        width: 150px;
        height: 150px;
        background-image: url('icon.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }
</style>

Ventajas:

• Flexibilidad para posicionamiento y repetición
• Útil para patrones y fondos decorativos

Desventajas:

• Sin interactividad
• Limitaciones para controlar el tamaño del SVG

Tabla comparativa de métodos

| Característica | SVG inline | <img> | <object> | CSS background | |----------------|------------|---------|------------|----------------| | Caché del navegador | No | Sí | Sí | Sí | | Estilización con CSS | Completa | Limitada | Parcial | Muy limitada | | Interactividad JS | Completa | No | Parcial | No | | Animaciones CSS | Sí | No | Parcial | No | | Peticiones HTTP | 0 | 1 | 1 | 1 | | Mantenimiento | Complejo | Simple | Medio | Simple |

Consideraciones prácticas

¿Cuándo usar SVG inline?

• Para iconos pequeños que necesitan cambiar de color según el tema o estado
• Cuando necesitas animaciones o interactividad con los elementos internos
• Para visualizaciones de datos que se actualizan dinámicamente
• Cuando el SVG es único para esa página y no se reutiliza

<button class="action-button">
    <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="2"/>
    </svg>
    Añadir nuevo
</button>

¿Cuándo usar SVG como imagen?

• Para ilustraciones más grandes o complejas
• Cuando el mismo SVG se usa en múltiples páginas
• Para mejorar el rendimiento de carga de la página
• Cuando no necesitas interactividad con los elementos internos

<div class="feature-card">
    <img src="features/security.svg" alt="Security feature" class="feature-icon">
    <h3>Seguridad avanzada</h3>
    <p>Protección de datos de última generación para tu tranquilidad.</p>
</div>

Ejemplo práctico: Sistema de iconos

Un enfoque común es crear un sistema de iconos que utilice SVG inline para permitir personalización:

<div class="icon-set">
    <div class="icon">
        <svg viewBox="0 0 24 24" width="32" height="32" class="icon-home">
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        <span>Inicio</span>
    </div>
    
    <div class="icon">
        <svg viewBox="0 0 24 24" width="32" height="32" class="icon-settings">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"></path>
        </svg>
        <span>Ajustes</span>
    </div>
</div>

<style>
    .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;
    }
    
    .icon svg {
        fill: none;
        stroke: #333;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .icon:hover svg {
        stroke: #0066cc;
    }
</style>

Este enfoque permite:

• Consistencia visual en toda la aplicación
• Personalización mediante CSS
• Interactividad con estados hover/focus
• Accesibilidad al incluir texto junto a los iconos

Canvas HTML5 para gráficos dinámicos

El elemento <canvas> es una tecnología fundamental de HTML5 que proporciona un lienzo en blanco donde podemos dibujar gráficos dinámicos mediante JavaScript. A diferencia de SVG, que es declarativo, Canvas utiliza un enfoque imperativo donde dibujamos píxel a píxel.

Conceptos básicos de Canvas

Para empezar a utilizar Canvas, necesitamos crear un elemento <canvas> en nuestro HTML y obtener su contexto de renderizado a través de JavaScript:

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
  // Obtener referencia al elemento canvas
  const canvas = document.getElementById('myCanvas');
  
  // Obtener el contexto de dibujo 2D
  const ctx = canvas.getContext('2d');
</script>

Es importante especificar el ancho y alto directamente en los atributos del elemento, no mediante CSS, para evitar distorsiones en el renderizado.

Sistema de coordenadas

Canvas utiliza un sistema de coordenadas donde:

• El origen (0,0) está en la esquina superior izquierda
• El eje X aumenta hacia la derecha
• El eje Y aumenta hacia abajo

![Sistema de coordenadas de Canvas]

Formas básicas

Canvas proporciona métodos para dibujar formas geométricas básicas:

Rectángulos

// Rectángulo relleno
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 100, 75);

// Rectángulo con borde
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 5;
ctx.strokeRect(200, 50, 100, 75);

// Borrar un área rectangular
ctx.clearRect(75, 75, 50, 25);

Rutas (paths)

Para dibujar formas más complejas, utilizamos el sistema de rutas:

// Comenzar una nueva ruta
ctx.beginPath();

// Dibujar un triángulo
ctx.moveTo(150, 50);    // Mover al punto inicial
ctx.lineTo(100, 150);   // Línea al segundo punto
ctx.lineTo(200, 150);   // Línea al tercer punto
ctx.closePath();        // Cerrar la ruta (volver al inicio)

// Aplicar estilos y dibujar
ctx.fillStyle = '#2ecc71';
ctx.fill();
ctx.strokeStyle = '#27ae60';
ctx.lineWidth = 3;
ctx.stroke();

Círculos y arcos

ctx.beginPath();
ctx.arc(300, 100, 40, 0, Math.PI * 2); // (x, y, radio, ángulo inicial, ángulo final)
ctx.fillStyle = '#9b59b6';
ctx.fill();

Estilos y colores

Canvas ofrece varias propiedades para controlar la apariencia de los gráficos:

// Colores sólidos
ctx.fillStyle = '#3498db';     // Color de relleno
ctx.strokeStyle = '#e74c3c';   // Color de borde

// Transparencia
ctx.globalAlpha = 0.5;         // Transparencia global

// Gradientes
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;

// Patrones
const img = document.createElement('img');
img.src = 'pattern.png';
img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

Texto en Canvas

Canvas permite dibujar texto con diferentes estilos:

// Configurar estilo de texto
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Dibujar texto
ctx.fillText('Hola Canvas', canvas.width/2, canvas.height/2);

// Texto con borde
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 1;
ctx.strokeText('Hola Canvas', canvas.width/2, canvas.height/2 + 40);

Transformaciones

Canvas permite aplicar transformaciones a los elementos dibujados:

// Guardar el estado actual del contexto
ctx.save();

// Aplicar transformaciones
ctx.translate(200, 150);  // Mover el origen
ctx.rotate(Math.PI / 4);  // Rotar 45 grados
ctx.scale(1.5, 0.8);      // Escalar

// Dibujar un rectángulo transformado
ctx.fillStyle = '#f39c12';
ctx.fillRect(-50, -25, 100, 50);

// Restaurar el estado original
ctx.restore();

Manipulación de imágenes

Canvas permite cargar y manipular imágenes:

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  // Dibujar imagen completa
  ctx.drawImage(img, 10, 10);
  
  // Dibujar imagen con tamaño específico
  ctx.drawImage(img, 150, 10, 100, 75);
  
  // Recortar y dibujar parte de la imagen
  // ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
  ctx.drawImage(img, 50, 50, 100, 100, 300, 10, 100, 100);
};

Animaciones con Canvas

Una de las principales ventajas de Canvas es la facilidad para crear animaciones:

let x = 0;
let y = canvas.height / 2;
const radius = 20;
let dx = 4; // Velocidad horizontal

function animate() {
  // Limpiar el canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Dibujar círculo
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = '#3498db';
  ctx.fill();
  
  // Actualizar posición
  x += dx;
  
  // Rebotar en los bordes
  if (x + radius > canvas.width || x - radius < 0) {
    dx = -dx;
  }
  
  // Solicitar el siguiente frame
  requestAnimationFrame(animate);
}

// Iniciar animación
animate();

El método requestAnimationFrame() es crucial para crear animaciones eficientes, ya que sincroniza la actualización con el refresco de pantalla del navegador.

Interactividad con eventos

Podemos hacer que nuestros gráficos Canvas respondan a interacciones del usuario:

// Dibujar cuando el usuario hace clic y arrastra
let isDrawing = false;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  draw(e);
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    draw(e);
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
  ctx.beginPath(); // Comenzar una nueva ruta al soltar
});

function draw(e) {
  // Obtener posición del ratón relativa al canvas
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = '#3498db';
  
  ctx.lineTo(x, y);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(x, y);
}

Manipulación de píxeles

Canvas permite acceder y modificar los datos de píxeles directamente:

// Obtener datos de píxeles
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

// Modificar píxeles (convertir a escala de grises)
for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i]     = avg; // Rojo
  data[i + 1] = avg; // Verde
  data[i + 2] = avg; // Azul
  // data[i + 3] es el canal alfa (transparencia)
}

// Colocar los datos modificados de vuelta en el canvas
ctx.putImageData(imageData, 0, 0);

Ejemplo práctico: Gráfico de barras

Veamos cómo crear un gráfico de barras simple con Canvas:

// Datos para el gráfico
const data = [65, 59, 80, 81, 56, 55, 40];
const labels = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
const barWidth = 40;
const barSpacing = 20;
const chartHeight = 200;
const startX = 50;
const startY = 250;

// Dibujar ejes
ctx.beginPath();
ctx.moveTo(startX, startY - chartHeight - 20);
ctx.lineTo(startX, startY);
ctx.lineTo(startX + (barWidth + barSpacing) * data.length, startY);
ctx.strokeStyle = '#333';
ctx.stroke();

// Dibujar barras
for (let i = 0; i < data.length; i++) {
  const x = startX + i * (barWidth + barSpacing);
  const barHeight = (data[i] / 100) * chartHeight;
  
  // Dibujar barra
  ctx.fillStyle = `hsl(${210 + i * 15}, 70%, 60%)`;
  ctx.fillRect(x, startY - barHeight, barWidth, barHeight);
  
  // Dibujar valor
  ctx.fillStyle = '#333';
  ctx.font = '12px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(data[i], x + barWidth/2, startY - barHeight - 5);
  
  // Dibujar etiqueta
  ctx.fillText(labels[i], x + barWidth/2, startY + 15);
}

Rendimiento y optimización

Al trabajar con Canvas, especialmente en animaciones complejas, es importante considerar el rendimiento:

• Limitar el área de redibujado: En lugar de limpiar todo el canvas, limpia solo las áreas que cambian.
• Usar múltiples capas: Utiliza varios elementos canvas superpuestos para separar elementos estáticos de los dinámicos.
• Precalcular valores: Evita cálculos repetitivos dentro de los bucles de animación.
• Reducir llamadas al contexto: Agrupa operaciones similares para minimizar cambios de estado.

// Ejemplo de capas múltiples
const backgroundCanvas = document.getElementById('backgroundCanvas');
const foregroundCanvas = document.getElementById('foregroundCanvas');
const bgCtx = backgroundCanvas.getContext('2d');
const fgCtx = foregroundCanvas.getContext('2d');

// Dibujar fondo estático una sola vez
function drawBackground() {
  // Código para dibujar elementos de fondo
  bgCtx.fillStyle = '#f5f5f5';
  bgCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
  // Más elementos de fondo...
}

// Animar solo los elementos dinámicos
function animateForeground() {
  fgCtx.clearRect(0, 0, foregroundCanvas.width, foregroundCanvas.height);
  // Código para dibujar elementos animados
  requestAnimationFrame(animateForeground);
}

drawBackground(); // Se ejecuta una sola vez
animateForeground(); // Se ejecuta continuamente

Bibliotecas populares para Canvas

Aunque Canvas es potente por sí mismo, existen bibliotecas que facilitan su uso:

• Chart.js: Para crear gráficos y visualizaciones de datos
• Fabric.js: Añade interactividad tipo objeto a Canvas
• Paper.js: Framework vectorial para Canvas
• Three.js: Para gráficos 3D (utiliza WebGL, pero puede usar Canvas como fallback)

Estas bibliotecas simplifican tareas complejas mientras mantienen el rendimiento y la flexibilidad de Canvas.

Comparación entre SVG y Canvas: casos de uso

Después de explorar tanto SVG como Canvas, es fundamental entender cuándo utilizar cada tecnología. Ambas son herramientas gráficas poderosas en HTML5, pero tienen características distintivas que las hacen más adecuadas para diferentes escenarios.

Diferencias fundamentales

Antes de analizar los casos de uso específicos, veamos las diferencias clave entre estas tecnologías:

• Naturaleza del gráfico:

• SVG: Basado en vectores (formas matemáticas)

• Canvas: Basado en píxeles (mapa de bits)

• Modelo de renderizado:

• SVG: Declarativo (describes qué quieres y el navegador lo mantiene)

• Canvas: Imperativo (describes exactamente cómo dibujarlo)

• Estructura en el DOM:

• SVG: Los elementos existen en el árbol DOM

• Canvas: Solo existe el elemento <canvas>, los gráficos no están en el DOM

• Rendimiento con muchos elementos:

• SVG: Rendimiento disminuye con muchos elementos (>500)

• Canvas: Mantiene buen rendimiento incluso con miles de elementos

Casos de uso ideales para SVG

1. Interfaces de usuario e iconos

SVG es perfecto para elementos de interfaz que necesitan adaptarse a diferentes tamaños de pantalla:

<button class="action-button">
  <svg viewBox="0 0 24 24" width="18" height="18">
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
  </svg>
  Añadir elemento
</button>

Este enfoque permite que los iconos:

• Hereden el color del texto (currentColor)
• Se escalen perfectamente en dispositivos de alta densidad de píxeles
• Cambien de apariencia con estados de hover/focus mediante CSS

2. Infografías y diagramas estáticos

Para visualizaciones de datos que no cambian frecuentemente pero requieren alta precisión visual:

<svg width="500" height="300" viewBox="0 0 500 300">
  <!-- Eje X -->
  <line x1="50" y1="250" x2="450" y2="250" stroke="#333" stroke-width="2"/>
  <!-- Eje Y -->
  <line x1="50" y1="50" x2="50" y2="250" stroke="#333" stroke-width="2"/>
  
  <!-- Barras del gráfico -->
  <rect x="100" y="100" width="40" height="150" fill="#4285f4"/>
  <rect x="200" y="150" width="40" height="100" fill="#34a853"/>
  <rect x="300" y="80" width="40" height="170" fill="#fbbc05"/>
  
  <!-- Etiquetas -->
  <text x="120" y="270" text-anchor="middle">2020</text>
  <text x="220" y="270" text-anchor="middle">2021</text>
  <text x="320" y="270" text-anchor="middle">2022</text>
</svg>

Las ventajas incluyen:

• Accesibilidad integrada (los textos son seleccionables)
• Exportación de alta calidad para impresión
• Interactividad mediante tooltips o zooms sin pérdida de calidad

3. Ilustraciones interactivas

SVG brilla cuando necesitas interactividad específica con partes de una ilustración:

<svg viewBox="0 0 400 300" id="mapa-interactivo">
  <path id="region1" d="M50,50 L150,50 L150,150 L50,150 Z" fill="#e0e0e0"/>
  <path id="region2" d="M170,50 L270,50 L270,150 L170,150 Z" fill="#e0e0e0"/>
  <path id="region3" d="M50,170 L150,170 L150,270 L50,270 Z" fill="#e0e0e0"/>
</svg>

<script>
  document.querySelectorAll('#mapa-interactivo path').forEach(region => {
    region.addEventListener('mouseover', () => {
      region.setAttribute('fill', '#4285f4');
    });
    region.addEventListener('mouseout', () => {
      region.setAttribute('fill', '#e0e0e0');
    });
  });
</script>

Este enfoque es ideal para:

• Mapas interactivos donde cada región es un elemento separado
• Diagramas técnicos con partes seleccionables
• Infografías con elementos que responden a interacciones

4. Animaciones de baja complejidad

SVG es excelente para animaciones declarativas usando CSS o SMIL:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="20" fill="#4285f4">
    <animate 
      attributeName="r" 
      values="20;30;20" 
      dur="2s" 
      repeatCount="indefinite" />
  </circle>
</svg>

O usando CSS:

<style>
  .pulse-circle {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { r: 20; }
    50% { r: 30; }
    100% { r: 20; }
  }
</style>

<svg viewBox="0 0 100 100">
  <circle class="pulse-circle" cx="50" cy="50" r="20" fill="#4285f4"/>
</svg>

Ideal para:

• Loaders y elementos de progreso
• Transiciones suaves entre estados
• Animaciones que necesitan precisión vectorial

Casos de uso ideales para Canvas

1. Visualizaciones de datos complejas y dinámicas

Canvas destaca cuando necesitas representar grandes conjuntos de datos que cambian frecuentemente:

const canvas = document.getElementById('dataVisualization');
const ctx = canvas.getContext('2d');

// Función para dibujar miles de puntos de datos
function renderDataPoints(data) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  data.forEach(point => {
    ctx.fillStyle = point.color;
    ctx.beginPath();
    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2);
    ctx.fill();
  });
}

// Actualizar con nuevos datos cada segundo
setInterval(() => {
  const newData = generateRandomData(5000); // 5000 puntos
  renderDataPoints(newData);
}, 1000);

Perfecto para:

• Gráficos financieros con miles de puntos de datos
• Visualizaciones científicas que requieren actualizaciones frecuentes
• Mapas de calor y otras visualizaciones densas

2. Juegos y aplicaciones interactivas

Canvas es la opción preferida para juegos 2D y aplicaciones que requieren alta frecuencia de actualización:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let playerX = 50;
let playerY = 50;
const playerSize = 20;
const speed = 5;

// Control de teclado
document.addEventListener('keydown', (e) => {
  switch(e.key) {
    case 'ArrowUp': playerY -= speed; break;
    case 'ArrowDown': playerY += speed; break;
    case 'ArrowLeft': playerX -= speed; break;
    case 'ArrowRight': playerX += speed; break;
  }
});

// Bucle del juego
function gameLoop() {
  // Limpiar canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Dibujar jugador
  ctx.fillStyle = '#ff6347';
  ctx.fillRect(playerX, playerY, playerSize, playerSize);
  
  // Continuar el bucle
  requestAnimationFrame(gameLoop);
}

gameLoop();

Ventajas para juegos:

• Rendimiento optimizado para animaciones a 60fps
• Control total sobre cada píxel
• Gestión eficiente de colisiones y física

3. Edición y manipulación de imágenes

Canvas permite manipular imágenes a nivel de píxel:

const canvas = document.getElementById('imageEditor');
const ctx = canvas.getContext('2d');
const image = new Image();

image.onload = function() {
  // Dibujar imagen original
  ctx.drawImage(image, 0, 0);
  
  // Aplicar filtro (escala de grises)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i+1] + data[i+2]) / 3;
    data[i] = avg;     // Rojo
    data[i+1] = avg;   // Verde
    data[i+2] = avg;   // Azul
  }
  
  ctx.putImageData(imageData, 0, 0);
};

image.src = 'photo.jpg';

Ideal para:

• Editores de fotos con filtros y ajustes
• Herramientas de recorte y transformación
• Generación de miniaturas o procesamiento por lotes

4. Visualizaciones con partículas y efectos

Canvas es superior para crear sistemas de partículas y efectos visuales complejos:

const canvas = document.getElementById('particleSystem');
const ctx = canvas.getContext('2d');
const particles = [];

// Crear partículas
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 3 + 1,
    color: `rgba(66, 133, 244, ${Math.random() * 0.5 + 0.25})`,
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1
  });
}

function animate() {
  // Aplicar desvanecimiento en lugar de limpiar completamente
  ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Actualizar y dibujar partículas
  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;
    
    // Rebotar en los bordes
    if (p.x < 0 || p.x > canvas.width) p.vx = -p.vx;
    if (p.y < 0 || p.y > canvas.height) p.vy = -p.vy;
    
    // Dibujar partícula
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  });
  
  requestAnimationFrame(animate);
}

animate();

Perfecto para:

• Fondos animados con efectos de partículas
• Simulaciones físicas como fluidos o tela
• Efectos visuales como fuego, humo o agua

Tabla comparativa para selección rápida

| Criterio | Mejor opción | Razón | |----------|--------------|-------| | Pocos elementos (<100) con interactividad | SVG | Mejor accesibilidad y manipulación directa | | Miles de elementos sin interacción individual | Canvas | Mejor rendimiento con grandes cantidades de elementos | | Necesita ser accesible para lectores de pantalla | SVG | Los elementos están en el DOM y pueden tener atributos ARIA | | Animaciones complejas a 60fps | Canvas | Renderizado más eficiente para animaciones rápidas | | Gráficos que necesitan imprimirse en alta resolución | SVG | Escalable sin pérdida de calidad | | Manipulación de imágenes a nivel de píxel | Canvas | Acceso directo a los datos de píxeles | | Interfaces de usuario responsivas | SVG | Mejor adaptación a diferentes tamaños de pantalla | | Juegos 2D | Canvas | Mejor rendimiento para actualizaciones frecuentes |

Enfoque híbrido: lo mejor de ambos mundos

En proyectos complejos, a menudo la mejor solución es combinar ambas tecnologías:

<div class="visualization-container">
  <!-- Capa base SVG para elementos estáticos e interactivos -->
  <svg class="base-layer" viewBox="0 0 800 600">
    <g class="axes">
      <line x1="50" y1="550" x2="750" y2="550" stroke="#333" />
      <line x1="50" y1="50" x2="50" y2="550" stroke="#333" />
      <text x="400" y="580" text-anchor="middle">Tiempo (s)</text>
      <text x="20" y="300" text-anchor="middle" transform="rotate(-90 20,300)">Valor</text>
    </g>
    
    <g class="interactive-elements">
      <!-- Elementos interactivos como botones, controles, etc. -->
    </g>
  </svg>
  
  <!-- Capa Canvas para visualización de datos de alta densidad -->
  <canvas class="data-layer" width="800" height="600"></canvas>
</div>

<style>
  .visualization-container {
    position: relative;
    width: 800px;
    height: 600px;
  }
  
  .base-layer, .data-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .data-layer {
    pointer-events: none; /* Permite que los clics pasen al SVG debajo */
  }
</style>

Este enfoque híbrido permite:

• Usar SVG para la interfaz (ejes, etiquetas, controles)
• Usar Canvas para los datos (puntos, líneas, áreas de alta densidad)
• Mantener la accesibilidad de los elementos importantes
• Optimizar el rendimiento para grandes conjuntos de datos

Consideraciones de rendimiento

Al elegir entre SVG y Canvas, ten en cuenta estos factores de rendimiento:

• Número de elementos: SVG ralentiza con muchos elementos (>500), Canvas mantiene rendimiento
• Frecuencia de actualización: Canvas es mejor para actualizaciones a 60fps
• Complejidad de interacción: SVG es mejor para interacciones específicas con elementos individuales
• Memoria: Canvas puede consumir más memoria con imágenes grandes
• CPU vs GPU: Canvas puede aprovechar la aceleración por hardware en algunos navegadores

Consideraciones de desarrollo

Otros factores a considerar:

• Curva de aprendizaje: SVG suele ser más fácil para principiantes (similar a HTML/CSS)
• Depuración: SVG es más fácil de depurar (elementos visibles en el inspector)
• Mantenimiento: SVG puede ser más mantenible para gráficos estáticos
• Reutilización: SVG facilita la reutilización de componentes
• Integración con frameworks: Ambos se integran bien, pero SVG suele ser más directo con frameworks basados en DOM

Conclusión práctica

La elección entre SVG y Canvas no debe ser excluyente. Cada tecnología tiene su lugar en el desarrollo web moderno:

• SVG brilla en interfaces, iconos, infografías y visualizaciones interactivas con pocos elementos
• Canvas destaca en juegos, visualizaciones de datos complejas, efectos visuales y manipulación de imágenes

La tendencia actual en aplicaciones web sofisticadas es utilizar un enfoque híbrido, aprovechando las fortalezas de cada tecnología según las necesidades específicas de cada componente de la interfaz.