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

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

<script src="dist/rough.min.js"></script>
<canvas id="myCanvas"></canvas>
var rough = new RoughCanvas(document.getElementById('myCanvas'), 500, 500);
rough.rectangle(10, 10, 200, 200);

Drawing lines and shapes

Filling

Sketching style

Arcs and Curves

SVG Paths

Dynamic shapes

API