Synchronizingcollaborative canvasesat 60 FPS in real time.
Infinite Canvas Spatial Partitioning & CRDT Multi-User Collaboration
Hundreds of remote designers. Canvas stuttering on iPads. Nasty merge conflicts on shared boards.
SynapseStudio set out to create an unconstrained infinite vector whiteboard for collaborative product design and educational workshops. Early prototypes built with standard SVG DOM trees froze whenever more than twenty participants drew simultaneously.
Worse, operational transformation (OT) synchronization code frequently corrupted grouped vector paths and erased stroke histories during simultaneous offline reconnects.
Synapse partnered with Codedway to rebuild their vector canvas from the ground up using GPU hardware acceleration and Conflict-free Replicated Data Types (CRDTs).
GPU spatial acceleration paired with deterministic CRDT convergence.
Canvas Core (Wk 1–4)
Replacing SVG DOM with custom WebGL pipeline featuring Quadtree spatial partitioning.
State Sync (Wk 5–8)
Integrating Yjs CRDT over multiplexed binary WebSockets for peer state replication.
Mobile Optimization (Wk 9–11)
Touch gesture decimation and memory footprint tuning for Safari and Android browsers.
Stress Tests (Wk 12–14)
Deploying headless Chromium bots generating 10,000 vector operations/sec per board.
“Codedway took our stuttering prototype and transformed it into the smoothest, fastest vector canvas on the web.”
Hardware-Accelerated Vector Canvas
WebGL/2D Context rendering engine with dynamic spatial occlusion culling keeping draw calls minimal.
CRDT State Synchronization
Conflict-free state replication ensuring hundreds of users can edit shapes simultaneously with zero data loss.
Binary Protocol Multiplexing
Compact binary packet serialization reducing cursor movement bandwidth consumption by 85%.
Smart Gesture Decimation
Algorithmic smoothing and path decimation algorithms converting raw stylus input into crisp bezier curves.
Infinite Undo/Redo Engine
Selective non-destructive undo/redo tracking individual participant edits without clobbering peers.
Cross-Platform Touch Gestures
Fluid multi-touch pinch, zoom, and panning mechanics responsive on iOS, Android, and desktop mice.
Numbers don't lie.
“Our users routinely praise how responsive the board feels, even in global workshops with hundreds of simultaneous participants.”
SynapseStudio empowers distributed creative and engineering teams to brainstorm, diagram, and collaborate in real time on an infinite canvas with zero lag.
By implementing Yjs CRDTs over multiplexed binary WebSockets, vector mutations propagate across hundreds of concurrent peers worldwide in less than 25 milliseconds.
The Challenge
- State Divergence: Preventing race conditions and canvas stutter when hundreds of users simultaneously edit geometric shapes.
- GPU Acceleration: Rendering thousands of complex SVG path elements at a steady 60 frames per second on mobile Safari and lower-powered tablets.
- Bandwidth Optimization: Minimizing cursor broadcast payload sizes to avoid saturating client network connections.
Architecture Highlights
- Custom WebGL/Canvas rendering pipeline with spatial partitioning (Quadtree) for off-screen occlusion culling.
- High-throughput Go WebSocket edge servers with binary protocol encoding.
- CRDT undo/redo management preserving individual user history without clobbering collaborative changes.
Have a project? Let's scope it.
We'll tell you honestly if we're the right fit.