DrawIt Perfect is a fun drawing challenge where you try to draw perfect geometric shapes in one smooth stroke. As you draw, you'll see how accurate your shape is in real-time. When you beat your best score, enjoy a celebration animation that recognizes your achievement. You can play solo or create a group session to compete with friends, share your drawings, and see who can draw the most perfect shapes!
Try it out at drawit.tarch.ca
Play alone and challenge yourself to draw perfect geometric shapes. Each shape has a time limit, and you'll get real-time feedback on your drawing accuracy as you draw.
When you achieve a new best score, enjoy a vibrant celebration animation that recognizes your achievement and keeps you motivated to improve.
Create or join a group session to compete with friends in real-time. Share shapes, see each other's drawings, and compete on leaderboards for each shape type.
Group sessions have a maximum duration of 30 minutes. A countdown timer appears in the last 3 minutes to let everyone know when the session will end.
- Canvas-based single-stroke drawing with real-time perfection scoring.
- Support for circle, triangle, square, trapezoid, star, pentagon, hexagon, and heart.
- Gradient feedback along the stroke, countdown timer, session-best tracking, and celebration effects.
- Responsive sidebar with shape selector, status bar, and collapsible sections tailored for small screens.
- Multiplayer groups (create/join/quit) with shared shape selection, live cursor sharing, synchronized drawings, and per-shape leaderboards.
- Front-end: Vanilla JavaScript, HTML5 canvas, CSS (responsive, mobile-first tweaks).
- Real-time: WebSocket server built with Node.js +
ws. - Testing: Node
--testfor server-side modules intests/.
drawit/
├── index.html # App markup
├── styles.css # Global styles & responsive rules
├── app.js # Front-end controller
├── shapes.js # Shape definitions & scoring helpers
├── js/modules/ # Front-end modules (drawing engine, dialogs, realtime, etc.)
├── server/ # Node WebSocket server
└── tests/ # Node test runner & suites
- Node.js 18+ (tested with Node 18 and 20).
- npm 8+.
# 1. Install dependencies for the WebSocket server/client utilities
npm install
# 2. Start the WebSocket server (port 3001 by default)
node server/index.js
# 3. Serve the static front-end (any static server works)
npx serve . -p 3456
# 4. Open the app
open http://localhost:3456The client automatically connects to ws://localhost:3001 while running on localhost.
npm run test # runs node --test tests/server-tests.jsThe project consists of two deployables:
- Static Front-end (HTML/CSS/JS) – deploy to any static host.
- WebSocket Server (
server/index.js) – deploy to a Node-compatible host that supports persistent WebSocket connections.
Tip: If your host requires HTTPS for WebSockets, use
wss://and ensure TLS is configured.
The WebSocket server includes security features that can be configured via environment variables:
The server only accepts WebSocket connections from allowed origins (domains). This prevents unauthorized websites from using your WebSocket server.
Configuration:
- Set
ALLOWED_ORIGINSenvironment variable (comma-separated list) - Default:
https://drawit.tarch.ca
Limit the number of concurrent WebSocket connections per IP address to prevent abuse.
Configuration:
- Set
MAX_CONNECTIONS_PER_IPenvironment variable - Default:
15connections per IP
- Fork, clone, and install dependencies.
- Create a branch (
git checkout -b feature/...). - Make changes, run tests, open a PR.
This project is licensed under the MIT License. See the LICENSE file for details.
Tony Xu
Email: tony@tarch.ca
Repository: https://github.com/fihtony/drawIt