Canvas vs SVG: píxeles contra vectores

Acabas de dominar SVG, donde cada forma es un objeto que vive en el documento y obedece a tu CSS. Canvas es su opuesto exacto: un lienzo de píxeles donde dibujas con JavaScript y el navegador olvida lo que pintaste al instante. Suena a desventaja, pero es justo lo que hace posibles los videojuegos, las partículas y los gráficos de miles de elementos. Hoy entiendes la diferencia profunda y cuándo elegir cada uno.

Pizarrón magnético contra lienzo de acuarela

Los nombres técnicos: SVG es modo retenido (el navegador RETIENE cada forma como objeto en el DOM); Canvas es modo inmediato (ejecutas una orden de dibujo, deja píxeles, y no queda ningún objeto). Esa única diferencia explica todo lo demás.

Tu primer canvas

Un <canvas> es un elemento vacío; todo ocurre en JavaScript a través de su contexto 2D — el objeto con los pinceles:

<canvas id="lienzo" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById("lienzo");
const ctx = canvas.getContext("2d");   // el contexto: tu caja de pinceles

ctx.fillStyle = "#6d28d9";
ctx.fillRect(20, 20, 100, 80);          // rectángulo relleno: x, y, ancho, alto
</script>

ctx (por "context") es el objeto que usarás miles de veces: guarda el color actual (fillStyle), el grosor de línea, y tiene los métodos de dibujo (fillRect, arc, fillText...). Fíjate en la lógica de modo inmediato: fillStyle es un ESTADO que cambias antes de dibujar, no una propiedad de una forma. Es como mojar el pincel en un color y luego pintar: todo lo que pintes después sale de ese color, hasta que remojes.

Míralo dibujar

<canvas id="demo" width="320" height="150"></canvas>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
canvas { background: white; border: 1px solid #e2e8f0; border-radius: 12px; }

const ctx = document.getElementById("demo").getContext("2d");

// un rectángulo relleno
ctx.fillStyle = "#6d28d9";
ctx.fillRect(20, 30, 90, 90);

// un círculo (arco completo)
ctx.fillStyle = "#22c55e";
ctx.beginPath();
ctx.arc(180, 75, 45, 0, Math.PI * 2);
ctx.fill();

// texto
ctx.fillStyle = "#1e293b";
ctx.font = "600 16px system-ui";
ctx.fillText("Hola, canvas", 235, 80);

Ese dibujo ya NO es tres objetos: es una sola imagen de píxeles. No puedes seleccionar el círculo con el mouse ni cambiarle el color con CSS — para "moverlo" tendrías que limpiar el canvas y repintar. Esa es la mentalidad que el resto del módulo convierte en juegos.

La tabla de decisión

Reglas rápidas que resuelven el 95% de los casos:

• ¿Necesitas que cada elemento sea clickeable, accesible o estilable por CSS? SVG (son objetos del DOM).
• ¿Vas a dibujar y mover cientos o miles de cosas a 60fps? Canvas (el DOM colapsa con miles de nodos; el canvas ni se inmuta).
• ¿Un logo que se dibuja solo? SVG. ¿Un campo de estrellas con 2000 puntos cayendo? Canvas. ¿Una gráfica de 10 barras? SVG. ¿Fuego, humo, confeti? Canvas.

Mini-reto

Repite el canvas del ejemplo pero dibuja la bandera de Colombia: tres fillRect apilados (amarillo #FCD116 ocupando la mitad de arriba, azul #003893 un cuarto, rojo #CE1126 el último cuarto). Piensa las coordenadas Y: recuerda del módulo 12 que crecen hacia abajo. Es tu primer "dibujo con propósito" en píxeles.

Qué sigue

Ya tienes el pincel en la mano. La próxima lección es tu paleta completa: todos los métodos del contexto 2D para dibujar formas, líneas, texto e imágenes. La base sobre la que, en pocas lecciones, correrá tu primer juego.