Collaborative Whiteboard Tutorial

Build real-time collaborative drawing applications with multi-user synchronization and Fabric.js

Collaborative Whiteboard

Real-time collaborative drawing with multi-user synchronization

Demo Mode

1 user(s)

Tools

Color

Size

3px

Actions

Canvas: Loading... (Fabric.js) Mouse: (0, 0)

Connected Users

You (Demo User)

Drawing

Step 1: Demo Mode Active

Experience collaborative whiteboard features without an API key.

Demo Mode

Step 2: Setup Canvas

Initialize Fabric.js canvas for collaborative drawing.

const canvas = new fabric.Canvas('whiteboard-canvas', {
  width: 800,
  height: 600,
  backgroundColor: '#ffffff'
});

// Enable drawing mode
canvas.isDrawingMode = true;

Step 3: Connect to OddSockets

Establish WebSocket connection for real-time collaboration.

const client = new OddSocketsClient({
  apiKey: 'your-api-key',
  debug: true
});

await client.connect();
await client.subscribe('whiteboard-room', handleDrawingEvents);

Step 4: Sync Drawing Events

Broadcast drawing actions to all connected users.

canvas.on('path:created', (event) => {
  const pathData = event.path.toObject();
  
  client.publish('whiteboard-room', {
    type: 'drawing',
    action: 'path:created',
    data: pathData,
    user: currentUser,
    timestamp: Date.now()
  });
});

Step 5: Handle Remote Drawing

Receive and render drawings from other users.

function handleDrawingEvents(message) {
  if (message.type === 'drawing') {
    switch (message.action) {
      case 'path:created':
        const path = new fabric.Path(message.data.path);
        path.set(message.data);
        canvas.add(path);
        break;
    }
  }
}

Step 6: Live Cursors

Show real-time cursor positions of other users.

canvas.on('mouse:move', (event) => {
  const pointer = canvas.getPointer(event.e);
  
  client.publish('whiteboard-room', {
    type: 'cursor',
    x: pointer.x,
    y: pointer.y,
    user: currentUser
  });
});

Collaborative Whiteboard

Connected Users

Session Information

Complete Tutorial Code

Connection Error