When a shape is drawn using RoughJS, a lot of randomization is used to create the sketchy look and feel. There are times when you want to maintain the initially rendered shape, i.e. not randomize again on subsequent redraws. (See this issue).

This is where generators come in. RoughGenerator has the same api as RoughCanvas but it does not actually draw the shape - it returns the set of instructions to draw that sketchy shape at a later stage. This object (with instructions) is what we're calling a drawable.

Generators are also useful when creating shapes without an actual drawing context; for example, on the server or in a web worker.

You can get the generator from your RoughCanvas, RoughSVG object, or from the root rough object. If your code is running in an environment without HTML Canvas (background worker or on the server), you can use the last option to generate sketchy shapes without actually drawing them on a canvas

let roughCanvas = rough.canvas(document.getElementById('myCanvas'), config);
let generator = roughCanvas.generator;

let generator = rough.generator(config, size);

The config is the same object used when creating RoughCanvas. The size object suggests a size of the canvas when drawing without an actual canvas.

let generator = rough.generator(config, { width: 600, height: 600 });

Get the drawable from the generator and then later pass the drawable to RoughCanvas' draw method

let rect1 = generator.rectangle(10, 10, 100, 100);
let rect2 = generator.rectangle(10, 120, 100, 100, {fill: 'red'});
roughCanvas.draw(rect1);
roughCanvas.draw(rect2);

RoughCanvas also returns the drawable object when drawing a shape. This can be used later using the draw method

let shape = roughCanvas.rectangle(10, 10, 100, 100);
// After some time, clear canvas and draw the same shape again
roughCanvas.draw(shape);

The drawable object is serializable. You can store these generated shapes as JSON in a file/database.

let rect = generator.rectangle(10, 10, 100, 100);
store(JSON.stringify(rect));

Generator has a toPaths(drawable) method that turns a drawable into PathInfo objects

let rect = generator.rectangle(10, 10, 100, 100, {fill: 'red'});
let paths = generator.toPaths(rect);

paths here is an array of PathInfo objects.

Note: The paths must be rendered in the same order as they are returned.

Path info object represents all the information you may need to render a shape to a SVG Path.

It has following members:

d: A string containing a series of path descriptions.

stroke: Stroke color of the path.

strokeWidth: Stroke width to use for the path.

fill: Color used to fill the path.

pattern: Object describing the pattern to fill the path with (PatternInfo).

Note: Only fill or pattern is specified in a PathInfo instance. Never both.

This object describes the pattern to use to fill a path.

Members:

height: Height attribute.

width: Width attribute.

x: x attribute.

y: y attribute.

viewBox: viewBox attribute to use for this pattern.

path: PathInfo object to use as the pattern.