Rough.js

Create graphics with a hand-drawn, sketchy, appearance

DrawingCanvasSVG
rough-stuff/roughroughjs.comroughjs

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.

Rough.js works with both Canvas and SVG.

Rough.js sample

@RoughLib on Twitter.

Install


from npm:

  1. ```
  2. npm install --save roughjs
  3. ```

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


Rough.js rectangle

  1. ``` js
  2. const rc = rough.canvas(document.getElementById('canvas'));
  3. rc.rectangle(10, 10, 200, 200); // x, y, width, height
  4. ```

or SVG

  1. ``` js
  2. const rc = rough.svg(svg);
  3. let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
  4. svg.appendChild(node);
  5. ```

Lines and Ellipses


Rough.js rectangle

  1. ``` js
  2. rc.circle(80, 120, 50); // centerX, centerY, diameter
  3. rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
  4. rc.line(80, 120, 300, 100); // x1, y1, x2, y2
  5. ```

Filling


Rough.js rectangle

  1. ``` js
  2. rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
  3. rc.rectangle(120, 15, 80, 80, { fill: 'red' });
  4. rc.circle(50, 150, 80, {
  5.   fill: "rgb(10,150,10)",
  6.   fillWeight: 3 // thicker lines for hachure
  7. });
  8. rc.rectangle(220, 15, 80, 80, {
  9.   fill: 'red',
  10.   hachureAngle: 60, // angle of hachure,
  11.   hachureGap: 8
  12. });
  13. rc.rectangle(120, 105, 80, 80, {
  14.   fill: 'rgba(255,0,200,0.2)',
  15.   fillStyle: 'solid' // solid fill
  16. });
  17. ```

Fill styles can be: hachure(default), solid, zigzag, cross-hatch, dots, dashed, or zigzag-line

Rough.js fill examples

Sketching style


Rough.js rectangle

  1. ``` js
  2. rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
  3. rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
  4. rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });
  5. ```

SVG Paths


Rough.js paths

  1. ``` js
  2. rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
  3. rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
  4. rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
  5. rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
  6. ```

SVG Path with simplification:

Rough.js texas map Rough.js texas map

Examples


Rough.js US map

View examples here

API & Documentation


Full Rough.js API

Credits


Some of the core algorithms were adapted from handy processing lib.

Algorithm to convert SVG arcs to Canvas described here was adapted from Mozilla codebase

Contributors


Financial Contributors


Become a financial contributor and help us sustain our community. [Contribute]

Individuals



Organizations


Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]


License

MIT License (c) Preet Shihn