Create a gist now

Instantly share code, notes, and snippets.

@pshihn /README.md
Last active Feb 14, 2017

What would you like to do?
Rough.js Sample

A Simple example demonstrating how to use Rough.js.

<script src="//roughjs.com/builds/rough.min.js"></script>
<canvas id="myCanvas"></canvas>
<script>
var rough = new RoughCanvas(document.getElementById('myCanvas'), 800, 500);
rough.strokeWidth = 2;
rough.fill = "rgba(255,0,0,0.2)";
// draw rectangles
rough.rectangle(20, 390, 150, 100);
var rect = rough.rectangle(180, 390, 150, 100);
rect.fillStyle = "solid";
rect.strokeWidth = 4;
// draw circle and ellipse
rough.circle(380, 120, 100);
var e = rough.ellipse(200, 300, 350, 150);
e.roughness = 1.5;
e.hachureAngle = 60;
e.hachureGap = 1.5;
// draw blue polygon
var p = rough.polygon([
[680, 150], [500, 20], [650, 10], [760, 160], [690, 290]
]);
p.fill = "rgba(0,0,200,0.2)";
p.fillWeight = 6;
p.hachureGap = 2.5;
p.hachureAngle = 60;
// draw arcs
rough.arc(560, 360, 350, 400, -Math.PI + (Math.PI / 3), -Math.PI / 2, true);
rough.arc(560, 360, 350, 200, -Math.PI, -0.65 * Math.PI, true);
var arc = rough.arc(560, 360, 350, 200, -0.2 * Math.PI, 0.6 * Math.PI, true);
arc.stroke = "orange";
// draw a heart using SVG path commands
var path = rough.path("M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z");
path.fill = "rgba(0,255,0,0.6)";
path.fillWeight = 6;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment