EP.120 Whiteboard & Real-time Drawing Synchronization with WebSocket

After building a collaborative document editor using text sync, it’s time to move toward something even more challenging real-time drawing.

Apps like Miro, FigJam, and Excalidraw must support highly interactive features such as:

Multiple users drawing at the same time
Real-time shape, stroke, and cursor movement
Shared canvas state that stays perfectly in sync
Instant Undo/Redo
Ultra-low latency

In this article, you'll learn how to build a real-time Whiteboard System using Go + WebSocket, with architecture and code that’s ready for production use.

🧠 System Architecture Overview

Client (Canvas)
  ↕ WebSocket
Whiteboard Server (Go)
  ↕ Broadcast
All clients in the same board

Key Components

Canvas State – Current state of the board
Draw Events – Stroke or shape actions
Cursor Position – Each user's real-time pointer
History Stack – For Undo/Redo functionality
Room (Board) – Scoped by board_id for isolated sessions

✏️ 1. Drawing Event Data Format

Rather than syncing the whole canvas, we only send draw events:

{
  "board_id": "board-001",
  "user_id": "user-a",
  "type": "draw",
  "tool": "pen",
  "points": [
    { "x": 120, "y": 240 },
    { "x": 122, "y": 245 }
  ],
  "color": "#FF0000",
  "stroke": 2 }

Supported event types include:

draw (pen, brush)
shape (rectangle, circle, arrow)
cursor
undo, redo
clear

⚙️ 2. Server-side Data Structures (Go)

type DrawEvent struct {
	BoardID string      `json:"board_id"`
	UserID  string      `json:"user_id"`
	Type    string      `json:"type"`
	Tool    string      `json:"tool"`
	Points  []Point     `json:"points,omitempty"`
	Color   string      `json:"color,omitempty"`
	Stroke  int         `json:"stroke,omitempty"`
}

type Point struct {
	X float64 `json:"x"`
	Y float64 `json:"y"`
}

Each whiteboard session is managed via board_id to broadcast only within its own room.

🔄 3. Real-time WebSocket Sync

var boards = make(map[string]map[*websocket.Conn]bool)

func handleWhiteboard(conn *websocket.Conn, boardID string) {
	if boards[boardID] == nil {
		boards[boardID] = make(map[*websocket.Conn]bool)
	}
	boards[boardID][conn] = true

	defer func() {
		delete(boards[boardID], conn)
		conn.Close()
	}()

	for {
		var event DrawEvent
		if err := conn.ReadJSON(&event); err != nil {
			return
		}
		broadcast(boardID, event)
	}
}

func broadcast(boardID string, event DrawEvent) {
	for c := range boards[boardID] {
		c.WriteJSON(event)
	}
}

Result: User A draws something → all users see it instantly

Latency: Millisecond-level performance

🖱️ 4. Real-time Mouse / Cursor Sync

To show what others are doing on the canvas:

{
  "type": "cursor",
  "user_id": "user-b",
  "x": 450,
  "y": 300 }

Clients send cursor position every ~50ms
Server broadcasts to all clients in the same room

↩️ 5. Real-time Undo / Redo

Concept:

Each draw event = one action
Maintain a history stack per board

type BoardHistory struct {
	Undo []DrawEvent
	Redo []DrawEvent
}

Undo:

Pop from undo, push to redo
Broadcast to all clients to remove the last action

⚡ 6. Performance Optimization

Important when scaling to many users:

Send only deltas, not entire strokes
Throttle cursor updates (30–60 fps)
Batch frequent events
Use binary protocol for large boards
Split canvas into layers: background / drawing / cursor

🔐 7. Security & Access Control

Your system should include:

Board permissions (read / write access)
Rate limits per user
Shape validation to avoid malformed payloads
Protection against spam/flooding

🚀 Mini Project Challenge

Try building a real demo that supports:

2–3 users drawing in real-time
Cursor sync
Instant Undo/Redo
Open multiple tabs they must stay 100% synced

✅ If you can build all this, you’ve truly mastered real-time drawing synchronization 🎯

🔮 Coming Next: EP.121 Deploying WebSocket Server on Kubernetes

In the next episode, we’ll go full production.

You’ll learn how to:

Deploy your WebSocket Server with Kubernetes
Set up Load Balancer with Sticky Sessions
Implement Auto-Scaling to support thousands of connections

Stay tuned! 🚀

Follow Us: