# roughjs
> Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.
Latest version **4.6.6** (published 2023-11-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install roughjs
pnpm add roughjs
yarn add roughjs
bun add roughjs
```
## Health
**Score 35/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.6.6 |
| Published | 2023-11-20 |
| First published | 2018-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 165.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21151 |
| Author | Preet Shihn |
| Maintainers | shihn |
| Keywords | canvas, svg, graphics, sketchy, hand drawn, hand-drawn |
## Links
- npm: https://www.npmjs.com/package/roughjs
- Repository: https://github.com/pshihn/rough
- Homepage: https://roughjs.com
- Issues: https://github.com/pshihn/rough/issues
- npm.io page: https://npm.io/package/roughjs
## Dependencies (4)
- [hachure-fill](https://npm.io/package/hachure-fill.md) ^0.5.2
- [points-on-path](https://npm.io/package/points-on-path.md) ^0.2.1
- [points-on-curve](https://npm.io/package/points-on-curve.md) ^0.2.0
- [path-data-parser](https://npm.io/package/path-data-parser.md) ^0.1.0
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 4.6.6 (latest) — 2023-11-20
- 4.6.5 — 2023-10-21
- 4.6.4 — 2023-09-27
- 4.6.3 — 2023-09-25
- 4.6.2 — 2023-09-25
- 4.6.1 — 2023-09-23
- 4.6.0 — 2023-09-23
- 4.5.2 — 2021-12-10
- 4.5.1 — 2021-12-01
- 4.5.0 — 2021-11-08
- 4.4.5 — 2021-11-04
- 4.4.4 — 2021-11-03
- 4.4.3 — 2021-11-03
- 4.4.2 — 2021-11-02
- 4.4.1 — 2021-05-11
- … 32 more at https://npm.io/package/roughjs/versions
## README
# Rough.js
Rough.js is a small (\<9 kB) graphics library that lets you draw in a _sketchy_, _hand-drawn-like_, style.
The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing [SVG paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
Rough.js works with both [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG).
[@RoughLib](https://twitter.com/RoughLib) on Twitter.
## Install
from npm:
```
npm install --save roughjs
```
Or get the latest using unpkg: https://unpkg.com/roughjs@latest/bundled/rough.js
If you are looking for bundled version in different formats, the npm package will have these in the following locations:
CommonJS: `roughjs/bundled/rough.cjs.js`
ESM: `roughjs/bundled/rough.esm.js`
Browser IIFE: `roughjs/bundled/rough.js`
## Usage
```js
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height
```
or SVG
```js
const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);
```
### Lines and Ellipses
```js
rc.circle(80, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
rc.line(80, 120, 300, 100); // x1, y1, x2, y2
```
### Filling
```js
rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
fill: "rgb(10,150,10)",
fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
fill: 'red',
hachureAngle: 60, // angle of hachure,
hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
fill: 'rgba(255,0,200,0.2)',
fillStyle: 'solid' // solid fill
});
```
Fill styles can be: **hachure**(default), **solid**, **zigzag**, **cross-hatch**, **dots**, **dashed**, or **zigzag-line**
### Sketching style
```js
rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });
```
### SVG Paths
```js
rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
```
SVG Path with simplification:
 
## Examples
[View examples here](https://github.com/pshihn/rough/wiki/Examples)
## API & Documentation
[Full Rough.js API](https://github.com/pshihn/rough/wiki)
## Credits
Some of the core algorithms were adapted from [handy](https://www.gicentre.net/software/#/handy/) processing lib.
Algorithm to convert SVG arcs to Canvas [described here](https://www.w3.org/TR/SVG/implnote.html) was adapted from [Mozilla codebase](https://hg.mozilla.org/mozilla-central/file/17156fbebbc8/content/svg/content/src/nsSVGPathDataParser.cpp#l887)
## Contributors
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/rough/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/rough/contribute)]
## License
[MIT License](https://github.com/pshihn/rough/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)
---
_Source: https://npm.io/package/roughjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._