Stroke Order Trainer
Trace the character in the right order, or it tells you off.
AdvancedWeb appEducation14–28hAI-buildable 3/5no setup
Practise writing characters by tracing on a canvas, with the app checking both the shape and the stroke order. Comparing a freehand stroke against a reference path with enough tolerance to be fair but enough rigour to be useful is the interesting problem.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A character displays with a faint guide underneath
- The learner traces strokes on a canvas
- Each stroke is checked against the reference for shape and direction
- Strokes must be drawn in the correct order
- An animated demonstration plays the correct stroke order
- Feedback identifies which stroke went wrong and how
- Progress per character is tracked
The interesting part
- Comparing a freehand path to a reference with fair tolerance
- Detecting stroke direction, not just the resulting shape
- Sourcing stroke-order data in a usable format
Once it works
- Add a recognition mode with no guide shown
- Add spaced repetition over the character set
- Add radical breakdown for each character
Suggested stack
reacttypescripttailwindcanvas-api