This is a light weight Canvas based 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.

This project was inspired by Handy, a java based library for Processing. Rough.js borrows some core algorithms from Handy, but it is not a JS port for processing.js.

Releases

The latest Rough.js release (beta version 0.1): Download

How to use Rough.js

Setup

Import rough.js

<script type="text/javascript" src="https://roughjs.com/rough.min.js"></script>

Initialize a RoughCanvas object by passing in the canvas node and the size of the canvas. Following code snippet draws a

var rough = new RoughCanvas(document.getElementById('myCanvas'), 400, 200);
rough.rectangle(10, 10, 200, 200); // x, y, width, height

Drawing lines and shapes

rough.circle(80, 120, 50); // centerX, centerY, radius
rough.ellipse(300, 100, 150, 80); // centerX, centerY, radiusX, radiusY
rough.line(80, 120, 300, 100); // x1, y1, x2, y2

Filling

rough.fill = "red";
rough.circle(50, 50, 40);
rough.rectangle(120,15,80,80);

var c2 = rough.circle(50, 150, 40);
c2.fill = "rgb(10,150,10)";
c2.fillWeight = 3;

var r2 = rough.rectangle(120,105,80,80);
r2.fillStyle = "solid";
r2.fill = "rgba(255,0,200,0.2)";

var r3 = rough.rectangle(220,15,80,80);
r3.hachureAngle = 60;
r3.hachureGap = 8;

Sketching style

var r1 = rough.rectangle(15,15,80,80);
r1.roughness = 0.5;
r1.fill = "red";
var r2 = rough.rectangle(120,15,80,80);
r2.roughness = 2.8;
r2.fill = "blue";
var r3 = rough.rectangle(220,15,80,80);
r3.bowing = 15;
r3.stroke = "green"
r3.strokeWidth = 3;

Arcs and Curves

var arc1 = rough.arc(200, 100, 200, 180, -Math.PI + (Math.PI / 3), -Math.PI / 2, true);
arc1.fill = "red";
rough.arc(200, 100, 200, 180, -Math.PI, -0.75 * Math.PI, true);
var openArc = rough.arc(200, 100, 150, 130, -0.2 * Math.PI, 0.6 * Math.PI, false);
openArc.strokeWidth = 10;

var curve = rough.curve([[10, 10], [150, 65], [180, 165], [300, 20], [400, 200]]);

README.md

Rough.js