Canvasをアナログ手書き風に描画できるJSライブラリ「Rough.js」

1
<script type="text/javascript" src="https://roughjs.com/builds/rough.min.js"></script>

1
<canvas id="rough-canvas"></canvas>

1
var rough = new RoughCanvas(document.getElementById('rough-canvas'), 800, 500);
2

3
// 四角
4
var r1 = rough.rectangle(20, 20, 120, 120);
5
r1.stroke = '#016411';
6
r1.strokeWidth = 2;
7
r1.fill = '#6add5b';
8
r1.fillWeight = 2;
9
r1.roughness = 3;
10

11
// 円
12
var r2 = rough.circle(250, 80, 60);
13
r2.stroke = 'red';
14
r2.fill = '#FF6688';
15
r2.roughness = 2;
16
r2.strokeWidth = 2;