The Real-Time Collaborative Drawing Canvas is a multi-user web application that allows multiple participants to draw simultaneously on the same canvas with real-time synchronization. It demonstrates strong fundamentals in HTML5 Canvas manipulation, WebSocket communication, and collaborative state management — all without using frontend frameworks or external drawing libraries.
You can view the website by visiting: [https://real-time-canva.onrender.com/]
- Brush and eraser functionality
- Adjustable stroke width and color palette
- Smooth, pressure-free drawing paths
- Live synchronization of strokes between connected clients
- User cursor indicators showing drawing positions
- Overlap handling for concurrent drawing
- Shared undo/redo history across all users
- Stack-based operation management
- Maintains consistent canvas state
- Shows list of connected users
- Assigns unique color to each user
- Tracks user join/leave events in real time
- WebSocket (or Socket.io) based event broadcasting
- Room-based canvas session handling
- Synchronization and conflict management
| Component | Technology |
|---|---|
| Frontend | Vanilla JavaScript / TypeScript, HTML5 Canvas, CSS |
| Backend | Node.js, WebSockets / Socket.io |
| Data Protocol | JSON-based event messages |
| No Frameworks | No React, Vue, Angular, etc. |
| No Drawing Libraries | Pure Canvas API only |
collaborative-canvas/
├── client/
│ ├── index.html # Main HTML file
│ ├── style.css # Styling for the canvas and UI
│ ├── canvas.js/ts # Canvas drawing logic
│ ├── websocket.js/ts # Client-side WebSocket handler
│ └── main.js/ts # Initialization and UI binding
│
├── server/
│ ├── server.js/ts # Node.js + WebSocket setup
│ ├── rooms.js/ts # Room/session management
│ └── drawing-state.js/ts # Canvas state management + Undo/Redo logic
│
├── package.json
├── README.md
└── ARCHITECTURE.md # Detailed architecture & design doc
git clone
cd Real-time-collaborative-canvasnpm installnpm starthttp://localhost:3000
Open multiple tabs or browsers — each one represents a different user drawing in real-time.
- Run the backend server (
npm start). - Open two or more browser windows.
- Draw on one canvas — observe real-time updates on all others.
- Test Undo/Redo to confirm synchronized history.
- Observe live user cursors and connection status.
- Undo/Redo synchronization may desync on poor network connections.
- Canvas state not persistent (refresh clears all drawings).
- Limited handling for overlapping strokes during heavy concurrency.
- No authentication or user persistence after reload.
| Task | Duration |
|---|---|
| Canvas Drawing Implementation | 8 hrs |
| WebSocket Backend Setup | 5 hrs |
| Real-Time Sync Logic | 6 hrs |
| Undo/Redo & State Management | 6 hrs |
| Testing & Debugging | 4 hrs |
| Documentation | 3 hrs |
| Total | ~31 hrs |
Refer to ARCHITECTURE.md for:
- Detailed data flow diagram
- WebSocket message protocol structure
- Undo/Redo synchronization strategy
- Performance and concurrency handling decisions
- Conflict resolution mechanism
- ✍️ Touchscreen support for mobile/tablet
- 🏠 Room-based canvases for separate sessions
- 💾 Canvas persistence (save & reload drawings)
- ⚡ Performance metrics (FPS counter, latency display)
- 🎨 Creative tools (shapes, text insertion, layers)
- Add persistent sessions (Redis/MongoDB)
- Implement advanced stroke conflict resolution
- Add in-app chat for collaboration
- Add shape tools and layer-based editing
- Replay or time-lapse of drawing history
This assignment tests real-time systems thinking, canvas fluency, and collaborative architecture. Focus on:
- Smooth, consistent real-time drawing
- Clean code and modular design
- Graceful handling of concurrency
Deliver it like a production-grade mini-app — stable, optimized, and elegant. 🚀