⌘ REFERENCIA · 184 elementos
Cheatsheet de Canvas y SVG
Los dos modelos del gráfico 2D en un sitio: el lienzo y sus píxeles, el documento SVG y sus formas, filtros, accesibilidad y visualización. Busca por API o por lo que quieres dibujar.
🖌️ Contexto y resolución 12
El tipo se fija en la primera llamada y ya no cambiagetContext("2d")
Canvas opaco: compone sobre negro, no se superponealpha: false
Búfer en CPU: leer deja de sincronizar con la GPUwillReadFrequently: true
Menos latencia a cambio de tearing: tinta digitaldesynchronized: true
Con display-p3 hay que escribir los colores en esa sintaxiscolorSpace
No hay objetos que modificar: solo píxeles ya puestosModo inmediato
Arriba a la izquierda, y la y crece hacia abajoOrigen y ejes
Es el búfer, no CSS: asignarlo borra y resetea el estadocanvas.width
Volver al punto de partida sin reasignar el búferctx.reset()
Cambia con el zoom y al mover la ventana de pantalladevicePixelRatio
El único tamaño exacto en píxeles del dispositivodevicePixelContentBoxSize
La GPU puede tirar el búfer: repinta desde el modelocontextlost
✏️ Rutas, trazo y relleno 15
Sin él, cada stroke repinta todo lo acumuladobeginPath()
moveTo abre subruta; lineTo la extiendemoveTo · lineTo
Cierra de verdad: produce unión, no dos terminacionesclosePath()
Dos controles; la continuidad exige alinear tangentesbezierCurveTo
Radianes, y el ángulo cero mira a las tres en puntoarc(x,y,r,a0,a1)
Modelo de tangentes: la esquina redondeada de dos segmentosarcTo
Rectángulo con radios sin construir la ruta a manoroundRect
Se reparte a los dos lados: de ahí el medio píxellineWidth
Cómo acaba y cómo se une; miterLimit corta la puntalineCap · lineJoin
Patrón recorrido a lo largo de la ruta; el offset lo animasetLineDash
Constrúyelo una vez: dentro del bucle es carísimocreateLinearGradient
Regla por defecto: cuenta el sentido del recorridononzero
Cuenta cruces: el agujero es un contorno dentro de otroevenodd
La geometría fuera del contexto, construida una sola vezPath2D
Acepta la cadena de una ruta SVG tal cualnew Path2D(d)
🔄 Transformaciones y estado 9
Se acumulan sobre la matriz: el orden cambia todotranslate · rotate · scale
Multiplica por la matriz actualtransform()
La reemplaza entera: el reset del escalado por DPRsetTransform()
Devuelve un DOMMatrix con la matriz vigentegetTransform()
De la posición del puntero a coordenadas de la escenainvertSelf()
Guardan matriz, estilos y la región de recortesave() · restore()
La ruta actual y los píxeles ya pintadosLo que no guardan
Dibuja en el origen de cada objeto y compón la jerarquíaEspacios locales
Solo reduce: se deshace con restore, nunca ampliandoclip()
🔤 Texto en canvas 10
La shorthand de CSS; reasignarla rehace la selección de fuentectx.font
Una sola línea: no hay saltos ni ajuste automáticofillText · strokeText
Condensa el texto para que quepa; no lo recortamaxWidth
Qué punto del texto cae sobre la xtextAlign
Qué línea tipográfica cae sobre la ytextBaseline
Cara por fotograma: cachea las métricas fuera del buclemeasureText
Suma de avances con kerning, no el ancho de la tintawidth
La caja real de la tinta: la que sirve para el fondoactualBoundingBox
Los extremos de la fuente: interlineado establefontBoundingBox
Lo escribes tú, segmentando por palabras y por grafemasAjuste de línea
🖼️ Imágenes y píxeles 13
Tamaño intrínseco en la posición dadadrawImage(img, x, y)
Reescalado al rectángulo de destinodrawImage(… dw, dh)
Recorte del origen: el atlas y el sprite sheetdrawImage con 9 argumentos
Decodifica, recorta y reescala antes de dibujarcreateImageBitmap
Libera la memoria sin esperar al recolectorbitmap.close()
Evita el tirón de decodificar dentro del fotogramaimg.decode()
A false para que el pixel art salga nítidoimageSmoothingEnabled
Miniaturas de calidad: bajar a la mitad varias vecesReducción por pasos
RGBA fila a fila en un Uint8ClampedArraygetImageData
Ignora transformación, recorte y composiciónputImageData
Obliga a sincronizar con la GPU: la llamada más caraEl coste de leer
Recurso de otro origen sin CORS: leer lanza SecurityErrorCanvas contaminado
Y una respuesta cacheada sin cabeceras contamina igualcrossOrigin
🧪 Composición y fusión 12
Qué sobrevive del origen y qué del destinoglobalCompositeOperation
El valor por defecto: encima, con su alfasource-over
Lo que dibujas borra, con su antialiasing incluidodestination-out
Del destino solo lo que coincide: la máscaradestination-in
Pintar dentro de una silueta existente sin salirsesource-atop
Los dos salvo el solape, que queda transparentexor
Solo el origen: el destino se descarta enterocopy
Suma los colores: luces, partículas, todo lo aditivolighter
Multiplica el alfa del origen antes de componerglobalAlpha
Los doce que operan canal a canalModos separables
hue, saturation, color y luminosity: por componentesNo separables
Nunca aclara: sombras que conservan la textura de abajomultiply
🧵 Worker, interacción y a11y 12
Canvas sin elemento; sirve también de capa de cachéOffscreenCanvas
Cede el control: el elemento ya no se puede dibujartransferControlToOffscreen
Sin DOM no hay CSS, ni eventos, ni medir con el documentoLo que se pierde
El propio rasterizador responde si el punto cae dentroisPointInPath
La misma consulta sobre el trazo y su grosorisPointInStroke
Un color por objeto y leer un píxel: tiempo constanteCanvas de color oculto
Identidad, orden e índice espacial: el canvas no los tieneModelo de escena
No es un plan B: es la única descripción del dibujoContenido de reserva
Canvas estático: un nombre y el subárbol se ignorarole="img"
Redibujar no anuncia nada: hace falta una región activaaria-live
Anillo de foco y posición del elemento enfocadodrawFocusIfNeeded
Retirada de la especificación y sin sustitutoaddHitRegion
⏱️ Bucle y rendimiento 12
Un fotograma por refresco; se para si la pestaña se ocultarequestAnimationFrame
Avanzar el estado y pintarlo son dos funciones distintasupdate y draw
Unidades por segundo: igual a 30, 60 y 120 herciosDelta time
Simulación determinista aunque el fotograma varíePaso fijo con acumulador
Borrado completo; un rectángulo translúcido deja estelaclearRect
Si nada cambia, no pintes y para el bucleDibujo bajo demanda
Repintar solo el rectángulo que cambió, alineado a píxelRegión sucia
Dibujar una vez y copiar todo lo que se repite igualCanvas de caché
Asignar fillStyle analiza una cadena: agrupa por estiloCambios de estado
El coste crece con el cuadrado del radioshadowBlur
Un pipeline de efectos por cada dibujo: fuera del buclectx.filter
Gradientes y cadenas de color crean basura que se recogeObjetos por fotograma
📐 SVG: el documento 12
Etiquetas cerradas, nombres sensibles a mayúsculasSVG es XML en el DOM
Cuatro números: la transformación implícita del lienzo al huecoviewBox
Qué hacer cuando las proporciones no coincidenpreserveAspectRatio
El valor por defecto: cabe entero y queda centradoxMidYMid meet
Cubre el hueco y recorta; la alineación decide qué sobreviveslice
Deforma para llenar; acompáñalo de non-scaling-strokenone
Es una unidad del sistema de coordenadas de usuarioNúmero sin unidad
Como imagen no entran ni tu CSS, ni scripts, ni fuentesimg frente a en línea
Se rellena de negro por omisión: fill none es obligatoriopolyline
El cierre es real: unión en el vértice, no dos terminacionespolygon
No hay z-index: manda el orden del documentoOrden de pintado
Geometría sin trazo ni filtros, y el trazo siempre se salegetBBox
〰️ El atributo d 12
Coordenada absoluta o relativa al punto actualMayúscula o minúscula
Abre subruta; los pares que siguen son L implícitosM
Recta; H y V ahorran una coordenada por vérticeL · H · V
Cierra la subruta: no es lo mismo que volver al primer puntoZ
Bézier cúbica con sus dos puntos de controlC
Cúbica con el primer control reflejado del comando anteriorS
Cuadrática y su abreviatura con control reflejadoQ · T
Siete parámetros: dos radios, giro, dos banderas y el destinoA
0 elige el arco menor de 180 grados, 1 el mayorlarge-arc-flag
0 antihorario y 1 horario, con la y hacia abajosweep-flag
Un solo A con inicio y fin iguales no dibuja nadaCírculo completo
La especificación los escala en lugar de fallarRadios cortos
💅 Estilar y reutilizar SVG 11
Regla de autor con especificidad cero: pierde con todoAtributo de presentación
fill, stroke y las stroke-*, text-anchor, las font-*Se heredan
opacity, filter, clip-path, mask, transformNo se heredan
Actúa sobre el resultado ya rasterizado, no sobre cada hijoopacity en un grupo
Hereda el color del texto; muere si se sirve como imagencurrentColor
El único canal que atraviesa el árbol de sombra de useCustom properties
Sin él, rotar gira alrededor del origen del lienzotransform-box
Contenido declarado que no se pinta hasta que se referenciadefs
Clona en un árbol de sombra cerrado: el CSS no llega dentrouse
Cada icono con su propio viewBox y su preserveAspectRatiosymbol
Gana caché y pierde con file, con otro origen y con un SWSprite externo
🌈 Gradientes, recorte y máscara 13
Un vector entre dos puntos y las paradas ordenadaslinearGradient
Por omisión objectBoundingBox: fracciones de la cajagradientUnits
Coordenadas del lienzo: un degradado continuo entre formasuserSpaceOnUse
Con anchura o altura cero el elemento no se pintaCaja degenerada
Círculo final con cx cy r y foco con fx fy frradialGradient
pad extiende el último color, reflect refleja, repeat repitespreadMethod
Sus dos sistemas de unidades no coinciden por omisiónpattern
Espacio de nombres global: dos componentes pueden chocarurl(#id)
Recorte binario: la opacidad del contenido no cuentaclipPath
Arranca en espacio de usuario, al revés que maskUnitsclipPathUnits
Valores continuos: el desvanecimiento que el recorte no damask
luminance es el inicial; alpha es lo que esperas de Figmamask-type
maskUnits en caja envolvente y el 120 por cientoRegión de la máscara
✨ Filtros SVG 12
Un grafo de operaciones sobre imágenes, no un efecto sueltofilter
Encadenar por nombre; sin in se toma la salida anteriorin y result
stdDeviation en unidades del lienzo, no en píxeles de CSSfeGaussianBlur
Desenfoque, desplazamiento y color en una sola primitivafeDropShadow
Vuelve a juntar las ramas paralelas en orden de apiladofeMerge
Matriz de 4 por 5 sobre RGBA, con el alfa incluidofeColorMatrix
Curvas por canal: umbral, posterizado, gammafeComponentTransfer
Ruido de Perlin como textura o como mapa de otra cosafeTurbulence
Desplaza píxeles usando otro resultado como mapafeDisplacementMap
Erosión y dilatación: adelgazar o engordar una formafeMorphology
Por omisión el 120 por ciento: por eso la sombra sale cortadaRegión del filtro
El inicial es linearRGB y casi siempre quieres sRGBcolor-interpolation-filters
🔠 Texto y accesibilidad en SVG 13
Marcan el origen de la línea base, no la esquinax e y en text
start, middle o end sobre el eje horizontaltext-anchor
Los motores difieren; el desplazamiento en em no falladominant-baseline
Tramos con estilo propio: x es absoluto y dx es relativotspan
No hay ajuste automático: una línea por tspanTexto multilínea
Texto proyectado sobre una ruta, colocado con startOffsettextPath
Fuerza una anchura; lengthAdjust decide qué se distorsionatextLength
Servido como imagen no carga fuentes: incrusta o traza contornosSVG exportado
Primer hijo, es el nombre accesible y no un tooltip fiabletitle
La descripción larga; refuérzala con aria-labelledbydesc
Colapsa el subárbol: un solo nombre para todo el gráficorole="img" en el svg
aria-hidden y sin title: no anunciar dos veces lo mismoSVG decorativo
La tabla de datos es la alternativa canónicaGráfica accesible
🧹 Optimizar, generar y decidir 16
Casi todo es seguro; el daño está en dos plugins concretospreset-default
Desactívalo: sin viewBox el SVG deja de escalarremoveViewBox
Desactívalo si el CSS o el JS referencian esos identificadorescleanupIds
Actívalo: mata la colisión entre SVG puestos en líneaprefixIds
Quita width y height y deja que mande el CSSremoveDimensions
El error visible se calcula: dos o tres decimales bastanPrecisión decimal
En línea pesa en cada documento; externo se cachea una vezEn línea o externo
createElement devuelve un elemento desconocido que no se pintacreateElementNS
Añade el xmlns a mano: los estilos externos no viajanXMLSerializer
Función de dominio de datos a rango de pantalla, con su inversaEscala
Solo 1, 2 o 5 por una potencia de diezMarcas bonitas
paddingInner entre barras y paddingOuter en los extremosEscala de banda
Coge la matemática y deja el DOM a tu frameworkD3 modular
Cuenta nodos, no puntos, y solo si el contenido cambiaUmbral de elementos
Lienzo para los datos densos, SVG para ejes e interacciónEnfoque híbrido
Un SVG se genera sin navegador; un lienzo noRender en servidor