Notes on Real-Time Canvas with WebSockets

When building a multiplayer canvas, drawing directly from incoming WebSocket packets leads to jitter whenever the network fluctuates.

The simplest approach that worked well was optimistic local rendering: paint the stroke immediately on the local canvas, and batch pointer coordinates every 50ms before transmitting them over WebSockets.

To prevent lines from looking sharp or broken when packets arrive in chunks, quadratic Bézier curves smooth the points between coordinate batches. For late joiners, keeping an in-memory stroke history on the server and replaying it upon connection maintains state parity without transmitting image bitmaps.