DrawSync
A lightweight, real-time collaborative digital canvas engineered for instant visual communication and smooth vector sketching.
On this page
Origins & Intent
"DrawSync was originally conceived as an embedded drawing and collaboration feature for a larger platform called Coordly."
"Inspired by tools like Excalidraw and Eraser, the goal was to build a lightweight whiteboarding experience. However, as the canvas and real-time collaboration mechanics matured, it became clear the engine was robust enough to stand on its own."
"Building a performant infinite canvas requires solving complex math around coordinate mapping, pointer-centered zooming, and smooth stroke interpolation—all while maintaining consistent state across multiple concurrent users."
Canvas & Coordinate Engine
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.
Smooth Vector Ink
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.
Real-Time Collaboration
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.
Engineering Challenges
1. Infinite Zoom Math
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. Eraser Collision Detection
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.
Trade-offs & Limitations
- The rendering engine uses an O(N) redraw strategy. Re-rendering the entire history on every mouse move will eventually cause frame rate drops on extremely dense drawings.
- Erasing a stroke removes the entire vector path, rather than slicing or erasing a specific segment of the line.
- No external database is currently connected for long-term persistence outside of the Liveblocks environment.
- No built-in authentication system; users connect anonymously with random IDs.
What I Learned
Building DrawSync was a deep dive into spatial reasoning and canvas mathematics. Managing infinite coordinates, scaling, and hit-detection requires a fundamentally different mindset than standard DOM manipulation.
I also learned that real-time collaboration is less about sending data fast, and more about carefully managing shared state, handling conflicts, and ensuring UI consistency across volatile network conditions.
What I Would Build Differently
"If I were to rebuild DrawSync today, I would architect it as a standalone product from day one. I'd focus on optimizing the O(N) rendering bottleneck for larger drawings, implement robust authentication, and explore AI assistance for generating diagrams or summarizing whiteboard sessions."
Technology Stack
| Technology | Role |
|---|---|
| Next.js 15 (App Router) | React framework and routing |
| React 19 | UI state and component architecture |
| HTML5 Canvas 2D | High-performance rendering engine |
| Liveblocks | WebSockets, presence, and real-time events |
| Tailwind CSS | Responsive styling and dark mode |
| Vercel | Edge deployment and hosting |