Guide · Open source

How to use Rough.js: draw hand-drawn shapes on canvas or SVG

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Rough.js is a small JavaScript graphics library that makes lines, curves, polygons, circles and ellipses look sketched by hand rather than perfectly computer-drawn. It works with both HTML Canvas and SVG. This guide is for web developers who want to add a casual, sketchy look to diagrams or illustrations. After reading it you will be able to install the library, draw shapes on a canvas or SVG element, and adjust fill and roughness.

Rough.jsrough-stuff/rough · ★ 21.3k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm are installed if you plan to install from npm.
2Install the package. Run npm install --save roughjs in your project folder.
3Add a canvas or SVG element. Place a canvas or an SVG element in your HTML page and give it an id you can reference.
4Create a rough instance. Call rough.canvas with your canvas element, or rough.svg with your SVG element.
5Draw shapes. Call methods such as rectangle, circle, ellipse, line or path with coordinates and optional options.
6Tune the style. Adjust fill, fillStyle, roughness and bowing until the sketch looks right for your project.

What Rough.js does and when to use it

Rough.js is a code library, not a drawing app. You call its functions from your JavaScript and it renders shapes in a sketchy, hand-drawn-like style. The README describes it as under 9 kB in size.

The library provides primitives for lines, curves, arcs, polygons, circles and ellipses, and it can also draw SVG paths.

Good fit: diagrams, illustrations, whiteboard-style or sketch-style interfaces, and informal maps or charts.
Poor fit: precise, technical or CAD-style drawings, since the output is intentionally rough.

Install Rough.js with npm

The README's install method is npm. You need Node.js and npm installed to use this route. Run the following command in your project folder.

If you prefer not to use npm, the README also mentions loading the latest build from unpkg. The npm package includes CommonJS, ESM and browser IIFE builds in the bundled folder.

CommonJS: roughjs/bundled/rough.cjs.js
ESM: roughjs/bundled/rough.esm.js
Browser IIFE: roughjs/bundled/rough.js

npm install --save roughjs

Draw your first shape on a canvas

Get a reference to a canvas element and wrap it with rough.canvas. The README gives the rectangle call as x, y, width, height. Rectangles, circles, ellipses and lines all follow the same pattern: you pass the drawing coordinates and an optional options object.

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

Draw on SVG instead of canvas

Rough.js also works with SVG. Instead of drawing directly, rough.svg returns a node that you append to your SVG element yourself.

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

Shapes, fills and roughness options

Circles take centre x, centre y and diameter. Ellipses take centre x, centre y, width and height. Lines take two points. You can pass an options object as the last argument to control fill and the sketchy look.

Fill styles listed in the README are hachure (the default), solid, zigzag, cross-hatch, dots, dashed and zigzag-line. The roughness option controls how rough the lines look, and bowing changes how much the lines curve. Options such as hachureAngle, hachureGap, fillWeight, fillStyle and strokeWidth are shown in the README examples.

fill: sets the fill colour, for example 'red' or 'rgba(255,0,200,0.2)'
fillStyle: set to 'solid' for a solid fill
roughness: for example 0.5 for subtler lines or 2.8 for rougher ones
bowing: adds curvature to the strokes
stroke and strokeWidth: set outline colour and thickness

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 });

Draw SVG paths

For custom shapes you can pass an SVG path string to rc.path. The README shows arcs and line segments drawn this way, and it also shows SVG path simplification for complex outlines such as maps.

rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });

Find more examples and the full API

The README links to a wiki with examples and the full API reference. Those pages are the place to look up options that this guide does not cover.

What people use it for

Adding a hand-drawn look to architecture or flow diagrams in a web app.
Building a whiteboard-style interface where shapes should look informal.
Drawing informal maps or charts, such as the US and Texas map examples in the README.
Creating simple illustrations for a web page with a sketched style.

Frequently asked questions

Is Rough.js free to use?

Rough.js is released under the MIT License, as stated in its README. The license text is linked from the repository, so check it there for the full terms.

How do I install Rough.js?

Run npm install --save roughjs. The README notes that this requires Node.js and npm. You can also load the latest build from unpkg.

Does Rough.js work with canvas and SVG?

Yes. The README says it works with both HTML Canvas and SVG. Use rough.canvas for canvas and rough.svg for SVG.

What is the difference between Rough.js and Excalidraw?

Rough.js is a code library you call from JavaScript. The README lists Excalidraw as a comparable project, and Excalidraw is a ready-made drawing tool, so the README-based comparison is between a library and an app. Pick Rough.js if you are building the drawing feature yourself.

Why do my shapes look too messy?

The README shows that the look is controlled by options. Lower the roughness value, for example to 0.5, to get cleaner lines. Higher values such as 2.8 give a rougher result.

Can I use Rough.js for precise technical drawings?

No. The README describes the output as intentionally rough, so it is not suited to precise or CAD-style drawings.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Rough.js suits web developers who want a lightweight, MIT-licensed library that adds a sketchy style to canvas or SVG graphics. It is not a good choice for precise technical drawings, for non-programmers who want a point-and-click tool, or for anyone who needs a ready-made drawing app rather than a code library.

Install options & downloads