rough README

The project's README from github.com/rough-stuff/rough. As one markdown file: README.md.

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:

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

Rough.js rectangle

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

Rough.js rectangle

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

Rough.js rectangle

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

Rough.js fill examples

Sketching style

Rough.js rectangle

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

Rough.js 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:

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

rough (rough-stuff/rough)

Searching Database…

21.3K ·GitHub
Rough
What is this?Rough.js is a small (<9 kB) JavaScript graphics library that makes drawings look sketchy and hand-drawn instead of clean and geometric.
Is this a library I add to my code, or a standalone drawing app?It's a library you import into your web code, not a standalone app: you call its primitives and it renders the sketchy result to Canvas or SVG.
How do I add it to my project?Install it from npm (the package is roughjs) or pull the latest build via unpkg. The package ships CommonJS, ESM and browser-IIFE bundles in its bundled/ folder.
Do I need anything besides the library to start drawing?No — it's plain client-side JavaScript, so no server or build step is required. Its helper libraries (hachure-fill, path-data-parser, points-on-curve, points-on-path) come along automatically as npm dependencies.
How much will it add to my page's bundle?Very little — the whole library is under 9 kB, small enough to keep in production without thinking about it.
Where do the sketchy algorithms come from?The author credits the handy processing lib for some core algorithms, and Mozilla's codebase for the SVG-arc-to-Canvas conversion.
Can I use it in commercial projects?Yes — Rough.js is MIT licensed (c) Preet Shihn, so free use, including commercial work, is fine.
What are similar projects?zdog, signature_pad, konva, matter-js, paper.js, anime, particles.js, mojs
Which topics is it in?html5-canvas, sketch, 2d, creative-coding, canvas, lightweight, svg, graphics, javascript-library, browser, html, npm
Creator
rough-stuff
Size
6 MB
Stars
21.3K
Updated
CommitNov 20Releasev3.1.0Mar 14
Age
9y
Commits · 90 Days