Collaboration
Two independent canvases with two independent documents, synchronized by exchanging operations. Draw on either side and the stroke appears on the other, with the other person's cursor and their stroke in progress shown live. This runs entirely in the browser over an in-memory transport; a real application implements the same interface over SignalR or WebSockets.
Empty drawing canvas.
Empty drawing canvas.
What travels on the wire
Drawing a stroke sends that stroke once, as a single operation. Nothing else is transmitted: not the other strokes, not the document. While the pen is down, the stroke in progress travels as presence, throttled, so the other side sees it being drawn. The most recent operation is shown below exactly as it was sent.
Draw on one of the canvases to see the operation that is sent.
Conflicts are resolved by last-writer-wins on each element's version, with the participant id breaking ties so
every replica reaches the same result. Two people drawing at once never conflict, because each stroke is a new
element with its own id. Take a participant offline and draw on both sides: the offline side queues what it
sends, the server keeps what is sent to it, and on reconnect both catch up until the replicas are identical.