Project

Xcal

Realtime Excalidraw

A real-time collaborative whiteboard built with the HTML Canvas API, RoughJS, and WebSockets.

Xcal is a browser-based whiteboard that enables multiple users to draw and collaborate on the same canvas in real time. Inspired by Excalidraw, it features hand-drawn rendering, low-latency synchronization, and a custom canvas engine built from scratch.

Features

  • ✏️ Freehand drawing with smooth stroke interpolation
  • ⬜ Rectangle, Circle, Line, Arrow, and Text tools
  • 🎨 Hand-drawn rendering powered by RoughJS
  • 🔄 Real-time collaboration using WebSockets
  • 👥 Room-based collaborative editing
  • ⚡ Optimized rendering pipeline for smooth interactions
  • 🖱️ Shape selection, movement, and transformations

Tech Stack

Layer Technology
Frontend React
Rendering HTML Canvas API
Drawing Engine RoughJS
Backend Node.js + Express
Realtime WebSockets
Language TypeScript

Architecture

            User A             User B
               │                  │  
               └──────────┬───────┴
                          │                 
                    WebSocket Server
                          │
                 Room-based Event Broadcast
                          │
        ┌─────────────────┴─────────────────┐
        ▼                                   ▼
 Canvas State Sync                  Drawing Events
        │                                   │
        └──────────────┬────────────────────┘
                       ▼
              Canvas Rendering Engine

Drawing Engine

The canvas engine is implemented directly on top of the HTML Canvas API.

Supported primitives:

  • Rectangle
  • Circle
  • Line
  • Arrow
  • Freehand Pencil

Each shape is represented as structured data, allowing the canvas to be fully reconstructed on every redraw while supporting selection, movement, and editing.

Real-Time Collaboration

Drawing operations are synchronized through WebSockets using room-based communication.

Mouse Event
      │
      ▼
Canvas Action
      │
      ▼
WebSocket Server
      │
      ▼
Broadcast to Room
      │
      ▼
Remote Canvas Update

The synchronization protocol supports multiple concurrent users editing the same whiteboard while maintaining a consistent shared state.

Rendering Pipeline

To maintain smooth interactions, the rendering system:

  • Redraws only when necessary
  • Minimizes expensive canvas operations
  • Batches user interactions
  • Efficiently replays canvas state

This allows the application to maintain approximately 45 FPS during collaborative drawing sessions.