rough/docs

Rough.js

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

Sketching style

Arcs and Curves

SVG Paths

Dynamic shapes

API