Initial problem
Inspired by Reddit's r/place, the challenge was building a massively concurrent pixel canvas that handles thousands of simultaneous users placing pixels in real time with minimal latency and no visual artifacts. The backend needed to handle high frequency writes while keeping all connected clients in sync.
Implementation
A real time collaborative canvas built with React and the HTML5 Canvas API on the frontend, powered by Convex as the backend platform. Convex provides real time data synchronization out of the box, handling concurrent pixel placements and broadcasting updates instantly to all connected clients without manual WebSocket management. Users can zoom, pan, and place colored pixels on a shared global canvas.
Outcome
What mattered
Real time pixel placement with instant sync across all users
Convex backend for automatic real time data synchronization
Efficient HTML5 Canvas rendering for large pixel grids
Zoom and pan controls for canvas navigation
Color palette with custom color selection
Insights
The collaborative pixel art canvas in action
Technical frame
The technical frame sits at the end on purpose: it shows the engineering substance behind the solution.
Next project
End paperwork the moment you leave the site.
View project