roughjs

What is roughjs?

Rough.js is a graphics library that allows you to draw sketchy, hand-drawn-like graphics on the web. It is particularly useful for creating visuals that have a more organic and less computer-generated feel.

What are roughjs's main functionalities?

Drawing Basic Shapes

Rough.js allows you to draw basic shapes like rectangles, circles, and lines with a hand-drawn appearance. The code sample demonstrates how to draw a rectangle on a canvas element.

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

Drawing with SVG

Rough.js can also be used to draw on SVG elements. This code sample shows how to draw a circle using SVG, which can then be manipulated or styled further.

const rc = rough.svg(document.getElementById('svg'));
const node = rc.circle(50, 50, 80);
document.getElementById('svg').appendChild(node);

Customizing Appearance

You can customize the appearance of the shapes by adjusting properties like roughness, stroke color, and stroke width. This example demonstrates how to draw a rectangle with a custom appearance.

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 100, { roughness: 2.8, stroke: 'red', strokeWidth: 3 });

Other packages similar to roughjs

paper

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It provides a more traditional and precise approach to vector graphics compared to the sketchy style of Rough.js.

two

Two.js is a two-dimensional drawing API for the web. It focuses on simplicity and ease of use, offering a more straightforward and less stylized approach than Rough.js, which emphasizes a hand-drawn look.

konva

Konva is a 2D canvas library that extends the 2D context by enabling high-performance animations and interactions. Unlike Rough.js, which focuses on sketchy drawings, Konva is more about performance and interactivity.

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.

@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

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

or SVG

const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);

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

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