Exportar tu canvas: a imagen, GIF o video

Hiciste una animación de canvas hermosa y quieres compartirla en redes, mandarla por chat o ponerla en un portafolio. ¿Cómo la sacas del navegador? Esta lección, corta y práctica, cubre las tres salidas — imagen fija, video y GIF — y cuál conviene, con una sorpresa: el navegador graba video sin instalar nada.

Un fotograma: canvas a PNG

Lo más simple: convertir el estado actual del canvas en una imagen descargable. toBlob te da el archivo:

function descargarPNG() {
canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "mi-dibujo.png";
  a.click();
  URL.revokeObjectURL(url);   // liberar memoria tras descargar
});
}

Perfecto para capturas, avatares generados o el fotograma final de un juego ("comparte tu puntaje"). El revokeObjectURL al final evita fugas de memoria — el blob se libera una vez usado.

Video sin librerías: MediaRecorder + captureStream

Aquí está lo que casi nadie sabe: el navegador puede GRABAR un canvas en video, nativo, cero dependencias. canvas.captureStream() convierte el canvas en una señal de video en vivo, y MediaRecorder la graba:

const stream = canvas.captureStream(60);        // señal de video a 60fps
const grabadora = new MediaRecorder(stream, { mimeType: "video/webm" });
const trozos = [];

grabadora.ondataavailable = (e) => trozos.push(e.data);
grabadora.onstop = () => {
const blob = new Blob(trozos, { type: "video/webm" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = "animacion.webm"; a.click();
};

grabadora.start();                              // ...tu animación corre...
setTimeout(() => grabadora.stop(), 4000);       // graba 4 segundos y descarga

Sale un .webm — formato moderno, ligero y de buena calidad. Es la vía recomendada para compartir animaciones: nativa, en alta resolución y sin peso extra en tu proyecto. Si necesitas MP4 (más compatible con edición de video), conviertes el WebM con una herramienta aparte o un servicio.

¿Y el GIF?

Generar un GIF desde canvas SÍ requiere una librería (el navegador no trae codificador de GIF): la clásica es gif.js. Nota honesta, fiel a las reglas de este proyecto: no vamos a instalar una dependencia solo para esto. Guárdate el dato — gif.js, se le pasan los fotogramas capturados y escupe el GIF — para el día que un proyecto REAL lo pida. Para casi todo, el WebM de MediaRecorder es mejor decisión: más liviano, más colores, cero dependencias.

La regla de decisión, entonces:

Mini-reto

Añade a cualquiera de tus canvas animados un botón "Grabar 3s" que use MediaRecorder para capturar y descargar un WebM. Ábrelo después: acabas de producir un video de algo que programaste tú, sin editor ni librerías. Es material directo para un portafolio — "mira lo que hago con canvas" pesa más con un video que con mil palabras.

Qué sigue

Se acabó la teoría del módulo. Tienes TODO: dibujo, game loop, física, input, sprites, colisiones y partículas. Es hora del examen de verdad, el que has estado esperando desde la primera lección: construir Pong completo, desde cero, línea por línea. Enciende el cronómetro.