A browser-based painting app that uses your webcam and hand gestures to draw — no mouse, no touch, just your hands.
Built with MediaPipe Hands and the Canvas API. Runs entirely in the browser as a single HTML file — no install, no server, no dependencies to manage.
Open hand-painter.html in Chrome, allow camera access, and start painting.
| Gesture | Action |
|---|---|
| ☝️ Any extended finger | Draws on the canvas — tracks whichever fingertip is highest |
| 🤏 Pinch (thumb + index, spread/close) | Resizes the brush — spread apart to go bigger, pinch together to go smaller |
| 🤙 Pinky finger only up | Hold briefly to clear the canvas — a red pulse ring appears as confirmation |
- Any finger draws — index, middle, ring, or pinky; whichever is most extended becomes the brush tip
- Live brush size preview — a circle appears between your pinched fingers showing the current size
- Pinky-to-clear — deliberate gesture (requires all other fingers curled) so it never fires accidentally
- Colour palette — 6 colours in the toolbar, click to switch
- Camera overlay toggle — show or hide the webcam feed underneath your strokes
- Dark canvas — black background, draws on top
- Download
hand-painter.html - Open it in Chrome or Edge (Firefox may have issues with MediaPipe's WASM)
- Allow camera access when prompted
- Start painting
No npm, no Python, no server. Just open the file.
| Input | Action |
|---|---|
| Click colour dot | Switch brush colour |
cam off button |
Toggle webcam feed overlay |
| ☝ → extend finger | Start drawing |
| 🤏 → pinch | Resize brush |
| 🤙 → pinky only | Clear canvas |
MediaPipe Hands detects 21 landmarks on your hand in real time. Each frame:
- Which finger is drawing? — checks all four fingertips, picks the one furthest above its knuckle joint
- Pinch detection — measures distance between thumb tip and index tip relative to hand size
- Pinky-only detection — requires index, middle, and ring to be curled while pinky is extended
- Drawing — strokes are painted onto a persistent
<canvas>layer; the overlay (hand skeleton + cursor) is on a separate canvas that clears every frame - Mirror correction — the overlay canvas is CSS-mirrored (
scaleX(-1)) to match the flipped webcam feed; drawing coordinates are un-mirrored before being written to the paint canvas
| Hand tracking | MediaPipe Hands JS |
| Camera | MediaPipe Camera Utils |
| Rendering | HTML5 Canvas API |
| Styling | Plain CSS (DM Mono font) |
| Framework | None — vanilla JS, single HTML file |
| Browser | Status |
|---|---|
| Chrome | ✅ Fully supported |
| Edge | ✅ Fully supported |
| Firefox | |
| Safari |
- Single hand only — MediaPipe is set to
maxNumHands: 1 - Requires good lighting for reliable tracking
- Works best when hand is clearly visible against a non-cluttered background
- Painting is not saved — refreshing the page clears the canvas
MIT