Suscríbete ahora

Esta es una nueva sección dentro de la newsletter donde hablo sobre distintas herramientas que encuentro. Te explico qué es, cómo funciona, cómo integrarla y luego te muestro una demo que he construido y que cuelgo en concriterio.tools

Hoy hablamos de Fabric

Cuando Figma no existía y Flash empezaba a morir, los desarrolladores que querían crear editores gráficos en el navegador, se encontraban con un problema: el canvas de HTML era muy limitado para un trabajo interactivo. Podías dibujar formas, sí, pero no podías seleccionarlas. No podías moverlas y el navegador no recordaba nada de lo que habías pintado.

Fabric.js nació en 2010, creado por Juriy Zaytsev, como solución a esa complejidad. Surgió de la necesidad práctica de tener una forma más accesible de crear aplicaciones gráficas interactivas en el navegador. Su autor estaba construyendo un editor para personalizar ropa online. La interactividad que necesitaba solo existía en Flash. Así que construyó la capa que faltaba.

Qué es exactamente

Fabric.js es como una caja de herramientas que te permite trabajar de manera más intuitiva: en lugar de pensar en píxeles individuales, trabajas con objetos (rectángulos, imágenes, textos) que puedes mover, rotar y modificar fácilmente.

La librería maneja automáticamente las cosas complicadas: detecta cuándo haces clic en una forma, permite arrastrar objetos, rotar figuras con el ratón y gestiona el redibujado de todo el canvas. Tú defines qué hay en el canvas y Fabric se encarga del resto.

Cuándo usarlo vs cuándo no

Usa Fabric cuando el usuario necesita manipular elementos visuales directamente: editores de imágenes, constructores de slides, herramientas de anotación, configuradores de producto. Cualquier aplicación donde los usuarios necesiten interactuar visualmente con elementos en pantalla.

No lo uses para visualizaciones de datos o juegos donde el rendimiento del render importa más que la interactividad de objetos. Para eso hay opciones más ligeras. Fabric es un editor de objetos, no un motor de juego.

Pricing: MIT, libre. Sin tokens, sin tiers. Es una librería npm.

Cómo se integra

bash

npm install fabric

typescript

import { Canvas, FabricImage, FabricText } from 'fabric'

const canvas = new Canvas('canvas-element', { width: 800, height: 600 })

// Cargar imagen
const img = await FabricImage.fromURL('/foto.jpg')
canvas.add(img)

// Añadir texto que el usuario puede mover y escalar
const text = new FabricText('Tu texto aquí', {
  left: 100, top: 100,
  fontSize: 32, fill: '#ffffff',
})
canvas.add(text)

// Exportar como PNG
const dataURL = canvas.toDataURL({ format: 'png' })

Con eso tienes selección, movimiento y escala de objetos funcionando por defecto. .toJSON() serializa el estado completo del canvas para guardarlo. .loadFromJSON() lo restaura. Un detalle: si encuentras ejemplos con fabric.Canvas son de v5 — en v6 el API cambió a imports con nombre.

La demo

He montado un editor de memes en fabric.concriterio.tools para que veas cómo funciona en real. Puedes cargar una imagen, añadir capas de texto con distintas tipografías, moverlas y escalarlas directamente sobre el canvas, y descargar el resultado como PNG.

Todo el código está en el repositorio público de Github, listo para que te lo puedas descargar y modificar a tu gusto.

(Accede a él a través de enlace)

Recapitulemos

Hay una categoría de interfaces que no se resuelven bien con HTML y CSS: las que el usuario edita visualmente, donde los elementos se mueven, se superponen y se transforman. Para eso existe el canvas. Y para trabajar con el canvas sin volverte loco, existe Fabric. Si alguna vez tienes que construir algo donde el usuario “diseña” en lugar de solo “rellenar formularios”, esta librería es el punto de partida.

Si esta entrega de Con Criterio te ha resultado útil, no olvides compartirla :)

Compartir