Login With Github

RoughJS API: Options

Describe how a particular shape is drawn. You can pass in options in every method to the RoughCanvas or in the constructor.

Every property is options is optional. The way an option property is resolved is as follows:

For example, the stroke property defines the color used to draw the shape. If stroke is defined in the options of a line command, that color will be used. Else it will use the color defined in the constructor. Else it will use the built in default color - black

Following properties can be set in the options:

roughness

Numerical value indicating how rough the drawing is. A rectangle with the roughness of 0 would be a perfect rectangle. Default value is 1. There is no upper limit to this value, but a value over 10 is mostly useless.

canvas.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
canvas.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
canvas.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

bowing

Numerical value indicating how curvy the lines are when drawing a sketch. A value of 0 will cause straight lines. Default value is 1.

stroke

String value representing the color of the drawn objects. Default value is black (#000000).

strokeWidth

Numerical value to set the width of the strokes (in pixels). Default value is 1.

fill

String value representing the color used to fill a shape. In hachure style fills, this represents the color of the hachure lines. In dots style, it represents the color of the dots.

fillStyle

Rough.js supports the following styles (Default value is hachure):

hachure draws sketchy parallel lines with the same roughness as defined by the roughness and the bowing properties of the shape. It can be further configured using the fillWeight, hachureAngle, and hachureGap properties.

solid is more like a conventional fill.

zigzag draws zig-zag lines filling the shape

cross-hatch Similar to hachure, but draws cross hatch lines (akin to two hachure fills 90 degrees from each other).

dots Fills the shape with sketchy dots.

canvas.circle(50, 50, 80, { fill: 'red' });
canvas.rectangle(120, 15, 80, 80, { fill: 'red' });
canvas.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
canvas.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
canvas.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

fillWeight

Numeric value representing the width of the hachure lines. Default value of the fillWeight is set to half the strokeWidth of that shape.

When using dots styles to fill the shape, this value represents the diameter of the dot.

hachureAngle

Numerical value (in degrees) that defines the angle of the hachure lines. Default value is -41 degrees.

hachureGap

Numerical value that defines the average gap, in pixels, between two hachure lines. Default value of the hachureGap is set to four times the strokeWidth of that shape.

curveStepCount

When drawing ellipses, circles, and arcs, RoughJS approximates curveStepCount number of points to estimate the shape. Default value is 9.

simplification

When drawing paths using SVG path instructions, simplification can be set to simplify the shape by the specified factor. The value can be between 0 and 1.

For example, a path with 100 points and a simplification value of 0.5 will estimate the shape to about 50 points. This will give more complex shapes a sketchy feel.

Following is the map of Texas drawn without simplification and then with a simplification of 0.1

A value of 0 (default) is treated as no simplification.

0 Comment

temp