Rough Versions Save

Create graphics with a hand-drawn, sketchy, appearance

v3.0.0

5 years ago

v2.2.5

5 years ago

v2.2.4

5 years ago

v2.2.3

5 years ago

v2.2.1

5 years ago

TypeScript

With this release, Rough.js code has been ported to TypeScript. Moving to a typed language helps a lot as the codebase evolves and gets more complex.

Filling Shapes

I also added a few more fill types when filling shapes. In the previous versions, the shapes could be filled with a solid color or sketchy hachure parallel lines. Now there are a few more options:

hachure(default), solid, zigzag, cross-hatch, or dots

Rough.js fill examples

Code example

rc.rectangle(140, 130, 100, 100, {
  fill: 'rgba(255,0,0,0.5)',
  fillStyle: 'zigzag',
  hachureGap: 8
});

rc.rectangle(270, 130, 100, 100, {
  fill: 'rgba(255,0,0,0.5)',
  fillStyle: 'cross-hatch',
  hachureAngle: 60
});

rc.rectangle(660, 130, 100, 100, {
  fill: 'rgba(0,0,0,0.6)',
  fillStyle: 'dots',
  hachureGap: 5,
  fillWeight: 2    // affects the diameter of the dots
});

v2.2.0

5 years ago

v2.1.2

6 years ago