Drawing App
A canvas you can actually draw on, with size and colour controls.
StarterWeb appCreative3–6hAI-buildable 5/5no setup
Pointer events plus the Canvas 2D API: track pressed state, interpolate between move events so fast strokes don't leave gaps, and expose brush size and colour. The gap-filling is what separates this from a toy.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 5
- Draw on a canvas by pressing and dragging
- Brush size is adjustable with +/- controls
- A colour picker sets the stroke colour
- Fast strokes draw a continuous line with no gaps
- A clear button wipes the canvas
The interesting part
- Interpolating between pointer move events for smooth fast strokes
- Keeping canvas resolution correct on high-DPI screens
Once it works
- Add undo/redo with a stroke stack
- Export the drawing as a PNG
Suggested stack
reacttypescripttailwindcanvas-apidnd-kittanstack-query