Rough.js
A small JavaScript library that draws shapes in a sketchy, hand-drawn style on Canvas or SVG.rough-stuff/rough
- Stars
- 21.3k
- Forks
- 670
- Licence
- MIT
- Language
- HTML
- Last update
- 2.3 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Rough.js is a small JavaScript graphics library that makes lines, shapes, and paths look hand-drawn instead of perfectly computer-drawn. It works with both HTML Canvas and SVG, so it can be added to a web page to produce diagrams or illustrations with a sketchy look. The README describes it as under 9 kB in size.
- Draw rectangles, circles, ellipses, and lines with a sketchy outline on a web page
- Fill shapes with hachure, zigzag, cross-hatch, dots, or solid patterns
- Render SVG paths in a hand-drawn style
- Adjust roughness and bowing to change how sketchy the output looks
Great for
- Web developers who want a casual, hand-drawn look for diagrams or illustrations
- Developers building whiteboard-style or sketch-style interfaces
- People creating maps or charts that should look informal
- Projects that need a lightweight drawing library with no heavy dependencies noted in the README
Not ideal for
- People who need precise, technical, or CAD-style drawings, since the output is intentionally rough
- Users who want a ready-made drawing app rather than a code library, since the README covers only the library API
- Non-programmers looking for a point-and-click tool
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm, if installing from npm
Install from npm
npm install --save roughjs - 2
Run it
- Install the package with npm or load the script from unpkg.
- Add a canvas or SVG element to your HTML page.
- Create a rough canvas or rough svg object from that element.
- Call a drawing method such as rectangle or circle to see the sketchy output.
- 3
Get the most out of it
- Use the fill option with fillStyle values such as zigzag or cross-hatch to change the texture.
- Tune roughness and bowing to control how sketchy the lines look.
- Use the path method with SVG path strings for custom shapes.
- Use the simplification example from the README to render complex outlines such as maps.
- Check the wiki for the full API reference linked in the README.
Downloads
Strengths
- Small library size, described as under 9 kB in the README
- Works with both Canvas and SVG output
- Simple API with examples for shapes, fills, and paths
Trade-offs
- The README is brief and points to an external wiki for full API documentation
- Output is deliberately imprecise, so it is unsuited to exact measurements
- The README shows no information on browser support or the maintenance pace beyond the last push date
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| rough (this) | 21.3k | Library | intermediate | 2.3 years ago | Web developers who want a casual, hand-drawn look for diagrams or illustrations |
| excalidraw | 135k | App | beginner | 4 days ago | Teams sketching diagrams or wireframes together in a shared canvas |
| Handy | 37k | App | beginner | 4 days ago | People who want dictation without sending their voice to a cloud service |
| G2 | 12.7k | Library | intermediate | 9 days ago | Front-end developers adding charts to a web dashboard |
| anime | 74.2k | Library | beginner | 3 months ago | Front-end developers adding motion to websites or web apps |
| mojs | 18.9k | Library | intermediate | 3 months ago | Front-end developers who want decorative animated effects like bursts, shapes, or icon animations |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.