Here’s what happened when I got tired of unfair drawing games
The Problem Was Driving Me Crazy
You know those online drawing games? The ones where you spend five minutes making a perfect cat and nobody guesses it. But then your friend draws three lines and wins because their buddy “gets it.”
That happened to me one too many times.
So I built something different. An AI that judges your drawings instantly and fairly.
Here’s How It Works
The AI looks at your drawing and gives you a score in seconds. No waiting for people to guess. No politics. Just you vs the art judge.
You can play with up to 7 friends at once. Everyone draws the same thing. Best score wins.
And you can watch everyone else draw while you’re drawing. It gets intense.
The Technical Stack
Built this as a web app using Next.js 14 and WebRTC. Here’s what it does:
Real-Time Canvas Synchronization
- 8 simultaneous HTML5 canvases streaming drawing data via WebRTC
- Sub-100ms latency for stroke replication across all clients
- Delta compression for drawing events to minimize bandwidth
- Canvas state recovery when players drop/rejoin mid-game
WebRTC Data Channels
- Peer-to-peer drawing data transmission
- Voice chat integration (optional)
- Connection fallback through TURN servers
- Handles network drops gracefully
AI Integration
- Canvas-to-image conversion on the client
- Real-time image analysis via REST API
- Multi-criteria scoring (accuracy, creativity, technique)
- Confidence intervals for edge case handling
Live Commentary System
- Azure Speech Services for text-to-speech
- AI-generated commentary based on drawing progress
- Real-time narration of player actions and scores
- Dynamic voice modulation for different game events
Game State Management
- Server-authoritative scoring and timing
- Real-time leaderboard updates
- Player authentication and persistence
- Room management with invite codes
Performance Optimizations
- Canvas virtualization for memory efficiency
- Selective rendering updates (only dirty regions)
- WebGL acceleration where supported
- Smart throttling of drawing events
Current Status: Beta & Looking for Feedback
Right now Artbitrator is in beta. The core tech works – you can draw, compete, and get AI scores in real-time. But I’m actively looking for feedback from other developers.
What’s Working Well:
- WebRTC connections are stable across different networks
- Canvas performance handles 8 simultaneous drawings smoothly
- AI scoring is consistent and fast (under 2 seconds)
- Azure Speech Services provides smooth live commentary
- Next.js SSR plays nicely with real-time features
What Could Be Better:
- Mobile touch drawing needs work
- AI sometimes misses obvious drawings
- Connection recovery could be more graceful
- Need better handling of network edge cases
Tech Stack Details:
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Real-time: WebRTC data channels + signaling server
- Canvas: HTML5 Canvas API with custom drawing engine
- AI: REST API for image analysis and scoring
- Speech: Azure Speech Services for live commentary
- State: Zustand for client state, PostgreSQL for persistence
- Auth: Clerk for user management
- Deployment: Docker containers on cloud infrastructure
If you’ve built similar real-time multiplayer web apps, I’d love to hear about your approach to the networking challenges.
Try the Beta & Give Feedback
The beta is live and working. Quick signup with social logins:
I’m especially interested in feedback on:
- WebRTC connection stability on your network
- Canvas drawing performance on your device
- How the AI commentary sounds and feels
- Any bugs or edge cases you find
- Ideas for improving the AI judging
Feel free to test it with friends and let me know how it performs!
The Bottom Line
What started as me being annoyed at drawing games turned into a full-stack real-time web application.
Next.js + WebRTC + Canvas API + AI = surprisingly powerful combination for creative multiplayer games.
The web platform can handle way more than people think.
Built something similar with WebRTC? Or thinking about AI-judged creative competitions? Let me know in the comments.
Tags: #nextjs #webrtc #canvas #ai #gamedev #multiplayer #webdev #realtime