Hand Draw
Draw on a canvas by pinching your fingers in front of a webcam.
A small browser app that turns a pinch of your thumb and index finger into a pen stroke on a canvas. The webcam tracks your hand, and the canvas does the rest. Works best on larger screens (tablets, laptops and desktops).
Why it exists
I wanted to see how far I could get with hand tracking in a plain browser tab — no native app, no install, no server. Drawing is a use case that feels direct; move your hand, see a line.
How it works
MediaPipe Hands runs in the browser and returns landmarks for each frame from the webcam. The app watches two of them: the tip of the index finger and the tip of the thumb. When they’re close enough, it treats that as a pinch and draws a segment at the fingertip position. Release the pinch and the pen lifts.
Coordinates are smoothed with an exponential moving average so the line doesn’t jitter. There are simple controls for brush size, colour, erase, and save.
Everything runs client-side. MediaPipe’s assets are loaded from a CDN, so there’s no backend to keep alive.
Ideas for improvements
- More gestures — two-finger pinch to erase, an open palm to clear.
- Pressure or speed-based brush dynamics that feel less mechanical.
- Multi-hand support, so two people can draw on the same canvas at once.