DrawSync
Un lienzo digital colaborativo en tiempo real, ligero y diseñado para la comunicación visual instantánea y el dibujo vectorial suave.
On this page
Orígenes e Intención
"DrawSync se concibió originalmente como una función de dibujo y colaboración integrada para una plataforma más grande llamada Coordly."
"Inspirado en herramientas como Excalidraw y Eraser, el objetivo era construir una experiencia de pizarra ligera. Sin embargo, a medida que maduraba la mecánica del lienzo y la colaboración en tiempo real, quedó claro que el motor era lo suficientemente robusto como para valerse por sí mismo."
"La construcción de un lienzo infinito de alto rendimiento requiere resolver matemáticas complejas en torno al mapeo de coordenadas, el zoom centrado en el puntero y la interpolación suave de trazos, todo mientras se mantiene un estado consistente en múltiples usuarios concurrentes."
Motor de Lienzo y Coordenadas
The drawing engine is built on the HTML5 Canvas 2D API, utilizing a retained-mode rendering loop. Instead of drawing directly to the screen and forgetting the shapes, every stroke and text object is stored in memory as JSON and re-rendered entirely on every frame update (`requestAnimationFrame`).
This retained-mode approach simplifies infinite panning, zooming, and undo/redo mechanics, as the entire state can be re-projected at any time.
To support an infinite coordinate model, the engine tracks `offsetX`, `offsetY`, and `zoom` factors. Every screen coordinate (where the mouse clicks) must be mathematically transformed into a virtual canvas coordinate before being stored.
- Device pixel ratio scaling for crisp high-DPI (Retina) rendering.
- Custom pointer, mouse, and touch event handling.
- Object-based vector history.
Tinta Vectorial Suave
A common pitfall in canvas drawing is using standard `lineTo()` connections between rapid mouse events, which results in jagged, unnatural lines.
DrawSync solves this by calculating the midpoints between successive pointer coordinates and drawing bezier curves (`quadraticCurveTo`) through them. This mathematical interpolation turns discrete pointer events into fluid, natural-looking ink strokes.
Colaboración en Tiempo Real
To handle the complex requirements of real-time state synchronization, DrawSync utilizes Liveblocks.
Initially, I experimented with a custom Socket.IO implementation. However, managing WebSocket connections, reconnections, and presence scaling for a side project added unnecessary backend overhead.
Migrating to Liveblocks provided managed WebSockets and out-of-the-box presence. Ephemeral data, like remote cursors, syncs via Liveblocks presence (`updateMyPresence`), while persistent drawing events (strokes, clears, undo/redo) are broadcasted to the room via pub/sub payloads.
Desafíos de Ingeniería
1. Matemáticas de Zoom Infinito
Problem: Implementing zoom that tracks the user's cursor (pointer-centered zooming) rather than zooming strictly into the top-left corner of the canvas.
Approach: Adjusting the `offsetX` and `offsetY` relative to the current mouse coordinates before applying the new `zoom` scale in the `handleWheel` event.
Result: A natural, predictable navigation experience familiar to users of modern design tools.
2. Detección de Colisión del Borrador
Problem: Because the canvas is rendered as pixels but stored as vectors, erasing requires mathematical hit-detection.
Approach: Calculating whether a mouse click intersects with the bounding box or path of an existing stroke.
Result: Allows users to erase entire vector strokes by clicking them, rather than pixel-by-pixel bitmap erasing.
Compromisos y Limitaciones
- El motor de renderizado utiliza una estrategia de redibujado O(N). Volver a renderizar todo el historial en cada movimiento del mouse eventualmente causará caídas de la velocidad de fotogramas en dibujos extremadamente densos.
- Borrar un trazo elimina toda la ruta del vector, en lugar de cortar o borrar un segmento específico de la línea.
- Actualmente no hay ninguna base de datos externa conectada para la persistencia a largo plazo fuera del entorno de Liveblocks.
- No hay un sistema de autenticación incorporado; los usuarios se conectan de forma anónima con ID aleatorios.
Lo Que Aprendí
Construir DrawSync fue una inmersión profunda en el razonamiento espacial y las matemáticas del lienzo. Manejar coordenadas infinitas, escalado y detección de impactos requiere una mentalidad fundamentalmente diferente a la manipulación estándar de DOM.
También aprendí que la colaboración en tiempo real se trata menos de enviar datos rápido y más de administrar cuidadosamente el estado compartido, manejar conflictos y garantizar la consistencia de la interfaz de usuario en condiciones de red volátiles.
Qué Construiría Diferente
"Si reconstruyera DrawSync hoy, lo diseñaría como un producto independiente desde el primer día. Me centraría en optimizar el cuello de botella de renderizado O(N) para dibujos más grandes, implementaría una autenticación sólida y exploraría la asistencia de IA para generar diagramas o resumir sesiones de pizarra."
Pila de Tecnología
| Technology | Role |
|---|---|
| Next.js 15 (App Router) | Marco de trabajo React y enrutamiento |
| React 19 | Estado de la interfaz de usuario y arquitectura |
| HTML5 Canvas 2D | Motor de renderizado de alto rendimiento |
| Liveblocks | WebSockets, presencia y eventos en tiempo real |
| Tailwind CSS | Estilo responsivo y modo oscuro |
| Vercel | Implementación de Edge y alojamiento |