Project 35, Media and real-time

Collaborative Whiteboard

Sketch, write and draw shapes on a shared board. Open a second tab and everything you draw appears there at once, with a named cursor for each person.

Drawing: Canvas 2D, Pointer Events
Sync: BroadcastChannel or WebSocket
Files: index.html, server.js
Your browser: Checking

Shared board

Your name Tabs only

How it works

Capture strokesPointer events are collected into a stroke: tool, color, width and a list of points with pressure.
Share strokesEach new point is sent to the others as a small message, so they see the line as it is being drawn.
Redraw from dataThe board is a list of strokes. Undo removes one and the canvas is redrawn from the list.

board.addEventListener("pointermove", (e) => {
  if (!drawing) return sendCursor(e);
  for (const p of e.getCoalescedEvents()) {          // every point, not just one per frame
    stroke.points.push([p.offsetX, p.offsetY, p.pressure || 0.5]);
  }
  drawSegment(stroke);
  send({ type: "points", id: stroke.id, points: stroke.points.slice(-3) });
});
// Others apply the same data and redraw
channel.onmessage = ({ data }) => apply(data);