Rough.js

Rough.js is a small 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.

Install

npm install --save @rogerta/roughjs

Import

Importing into ESM modules (including Typescript)

import rough from '@rogerta/roughjs';

Importing into CommonJS modules

const rough = require('@rogerta/roughjs');

Importing into Webpages

<script src="/server/path/to/rough.iife.js"></script>

Importing the library in Modern Webpages

  <script type="module">
    import rough from './server/path/to/rough.mjs';
    ...
  </script>

Canvas Usage

const canvas = document.getElementById('canvas');  // HTMLCanvasElement.
const rc = rough.canvas(canvas);
rc.rectangle(10, 10, 200, 200);

SVG Usage

const svg = document.getElementById('svg');  // SVGSVGElement.
const rc = rough.svg(svg);
svg.appendChild(rc.rectangle(10, 10, 200, 200));

Shapes

Rectangles

rc.rectangle(10, 10, 200, 200); // x, y, width, height

Lines and Ellipses

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

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

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

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

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

License

MIT License (c) Preet Shihn

Fork

This project is a fork of https://github.com/rough-stuff/rough by Preet Shihn. Significant changes have been made to support TypeScript 6 and simplify bundling for npmjs.