Los dos modelos del gráfico 2D: el contexto de canvas, píxeles y composición, SVG a fondo, filtros, y la visualización de datos.
Cada nivel construye sobre el anterior. Sin saltos, sin huecos.
Canvas frente a SVG frente a CSS: los tres modelos de gráfico, qué resuelve cada uno, y el mapa del territorio.
La diferencia profunda entre pintar píxeles y describir formas, y las consecuencias en escalado, memoria y accesibilidad.
getContext, el sistema de coordenadas, el modo inmediato, y por qué el canvas no recuerda lo que dibujaste.
La diferencia entre tamaño CSS y tamaño de buffer, devicePixelRatio, y el patrón correcto de redimensionado.
beginPath, moveTo, lineTo, las curvas de Bézier y arc, y por qué el orden de las llamadas importa.
lineWidth, cap y join, el patrón de guiones, fillStyle con gradientes y patrones, y la regla de relleno.
translate, rotate, scale y transform, la pila con save y restore, y pensar en espacios locales.
fillText, measureText y sus métricas completas, la línea base, y componer texto multilínea a mano.
Las tres firmas, el recorte, el sprite sheet, ImageBitmap y la decodificación fuera del hilo principal.
getImageData y putImageData, el array de píxeles, los filtros a mano, y el coste de leer del canvas.
Los operadores de Porter-Duff, los modos de fusión, el recorte con clip, y los efectos que desbloquean.
Path2D como objeto reutilizable, OffscreenCanvas en un worker, y transferControlToOffscreen.
isPointInPath, el hit testing por color, mantener un modelo de escena, y la accesibilidad del canvas.
La estructura update y draw, el delta time, el borrado parcial para estelas, y la interpolación.
Los cambios de estado, el canvas de caché, dibujar solo lo sucio, y cuándo el canvas deja de ser la respuesta.
SVG es XML en el DOM: el viewBox, preserveAspectRatio, el sistema de coordenadas y las unidades.
rect, circle, ellipse, line, polyline, polygon: sus atributos y cuándo usar cada uno frente a path.
Los comandos M, L, H, V, C, S, Q, T, A y Z, mayúsculas frente a minúsculas, y leer una d a ojo.
Atributos de presentación frente a CSS, qué se puede estilar, las variables CSS en SVG y la especificidad.
El patrón de sprite SVG, use y su shadow DOM, symbol con su propio viewBox, y los límites del estilado.
linearGradient y radialGradient, las unidades de gradiente, pattern, y las referencias por id.
La diferencia entre recortar y enmascarar, las unidades de contenido, y el uso desde CSS.
feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap y encadenar primitivas para efectos reales.
Posicionar texto, tspan para tramos, texto sobre una ruta, y el problema de las fuentes en SVG exportado.
title y desc, los roles ARIA, cuándo es decorativo, y el patrón para iconos y para gráficas de datos.
Qué produce Figma e Illustrator, qué quitar sin romper, la precisión decimal, y el SVG inline frente al externo.
Crear SVG desde JS con el namespace correcto, generar rutas por datos, y el patrón de componente de gráfico.
El concepto de escala, mapear dominio a rango, los tipos de escala, y construir un eje a mano.
La filosofía de D3, el join de datos, los generadores de forma, y usar D3 solo para la matemática.
Qué gráfico para qué pregunta, los errores clásicos de percepción, el color en datos y el eje truncado.
El umbral de elementos, la interacción, la accesibilidad, la impresión, y el enfoque híbrido.
La arquitectura de un sistema de visualización completo, el mapa de decisiones, y el futuro del 2D en la web.
Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.
Comenzar el camino →