paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
2,436 lines (1,582 loc) • 271 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Path</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Path</h1>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b></p>
<p>The path item represents a path in a Paper.js project.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="path" class="member">
<div class="member-link">
<a name="path" href="#path"><tt><b>Path</b>([segments])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new path item and places it at the top of the active layer.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>segments:</tt>
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
— An array of segments (or points to be converted to segments) that will be added to the path
— optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:<span class="description">Create an empty path and add segments to it:</span></h4>
<pre><code>var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));</code></pre>
<h4>Example:<span class="description">Create a path with two segments:</span></h4>
<pre><code>var segments = [new Point(30, 30), new Point(100, 100)];
var path = new Path(segments);
path.strokeColor = 'black';</code></pre>
</div>
</div>
</div>
<div id="path-object" class="member">
<div class="member-link">
<a name="path-object" href="#path-object"><tt><b>Path</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new path item from an object description and places it at the top of the active layer.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties to be set on the path
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var path = new Path({
segments: [[20, 20], [80, 80], [140, 20]],
fillColor: 'black',
closed: true
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
var path = new Path({
segments: [[20, 20], [80, 80], [140, 20]],
strokeColor: 'red',
strokeWidth: 20,
strokeCap: 'round',
selected: true
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-pathData" class="member">
<div class="member-link">
<a name="path-pathData" href="#path-pathData"><tt><b>Path</b>(pathData)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new path item from SVG path-data and places it at the top of the active layer.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>pathData:</tt>
<tt>String</tt>
— the SVG path-data that describes the geometry of this path
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
var path = new Path(pathData);
path.fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<h3>Shaped Paths</h3>
<div id="path-line-from-to" class="member">
<div class="member-link">
<a name="path-line-from-to" href="#path-line-from-to"><tt><b>Path.Line</b>(from, to)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a linear path item from two points describing a line.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>from:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the line’s starting point
</li>
<li>
<tt>to:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the line’s ending point
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-3">
var from = new Point(20, 20);
var to = new Point(80, 80);
var path = new Path.Line(from, to);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-line-object" class="member">
<div class="member-link">
<a name="path-line-object" href="#path-line-object"><tt><b>Path.Line</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a linear path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-4">
var path = new Path.Line({
from: [20, 20],
to: [80, 80],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-circle-center-radius" class="member">
<div class="member-link">
<a name="path-circle-center-radius" href="#path-circle-center-radius"><tt><b>Path.Circle</b>(center, radius)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a circular path item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>center:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the center point of the circle
</li>
<li>
<tt>radius:</tt>
<tt>Number</tt>
— the radius of the circle
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-5">
var path = new Path.Circle(new Point(80, 50), 30);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-circle-object" class="member">
<div class="member-link">
<a name="path-circle-object" href="#path-circle-object"><tt><b>Path.Circle</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a circular path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-6">
var path = new Path.Circle({
center: [80, 50],
radius: 30,
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-rectangle-rectangle" class="member">
<div class="member-link">
<a name="path-rectangle-rectangle" href="#path-rectangle-rectangle"><tt><b>Path.Rectangle</b>(rectangle[, radius])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular path item, with optionally rounded corners.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>rectangle:</tt>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
— the rectangle object describing the geometry of the rectangular path to be created
</li>
<li>
<tt>radius:</tt>
<a href="../classes/Size.html"><tt>Size</tt></a>
— the size of the rounded corners
— optional, default: <tt>null</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-7">
var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var path = new Path.Rectangle(rectangle);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
</div>
<h4>Example:<span class="description">The same, with rounder corners</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-8">
var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var cornerSize = new Size(10, 10);
var path = new Path.Rectangle(rectangle, cornerSize);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-rectangle-point-size" class="member">
<div class="member-link">
<a name="path-rectangle-point-size" href="#path-rectangle-point-size"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular path item from a point and a size object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the rectangle’s top-left corner.
</li>
<li>
<tt>size:</tt>
<a href="../classes/Size.html"><tt>Size</tt></a>
— the rectangle’s size.
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-9">
var point = new Point(20, 20);
var size = new Size(60, 60);
var path = new Path.Rectangle(point, size);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-rectangle-from-to" class="member">
<div class="member-link">
<a name="path-rectangle-from-to" href="#path-rectangle-from-to"><tt><b>Path.Rectangle</b>(from, to)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular path item from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>from:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the first point defining the rectangle
</li>
<li>
<tt>to:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the second point defining the rectangle
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-10">
var from = new Point(20, 20);
var to = new Point(80, 80);
var path = new Path.Rectangle(from, to);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-rectangle-object" class="member">
<div class="member-link">
<a name="path-rectangle-object" href="#path-rectangle-object"><tt><b>Path.Rectangle</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-11">
var path = new Path.Rectangle({
point: [20, 20],
size: [60, 60],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-12">
var path = new Path.Rectangle({
from: [20, 20],
to: [80, 80],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-13">
var path = new Path.Rectangle({
rectangle: {
topLeft: [20, 20],
bottomRight: [80, 80]
},
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-14">
var path = new Path.Rectangle({
topLeft: [20, 20],
bottomRight: [80, 80],
radius: 10,
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-ellipse-rectangle" class="member">
<div class="member-link">
<a name="path-ellipse-rectangle" href="#path-ellipse-rectangle"><tt><b>Path.Ellipse</b>(rectangle)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates an elliptical path item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>rectangle:</tt>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
— the rectangle circumscribing the ellipse
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-15">
var rectangle = new Rectangle(new Point(20, 20), new Size(180, 60));
var path = new Path.Ellipse(rectangle);
path.fillColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-ellipse-object" class="member">
<div class="member-link">
<a name="path-ellipse-object" href="#path-ellipse-object"><tt><b>Path.Ellipse</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates an elliptical path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-16">
var path = new Path.Ellipse({
point: [20, 20],
size: [180, 60],
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
</div>
<h4>Example:<span class="description">Placing by center and radius</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-17">
var shape = new Path.Ellipse({
center: [110, 50],
radius: [90, 30],
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-arc-from-through-to" class="member">
<div class="member-link">
<a name="path-arc-from-through-to" href="#path-arc-from-through-to"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a circular arc path item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>from:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the starting point of the circular arc
</li>
<li>
<tt>through:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the point the arc passes through
</li>
<li>
<tt>to:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the end point of the arc
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-18">
var from = new Point(20, 20);
var through = new Point(60, 20);
var to = new Point(80, 80);
var path = new Path.Arc(from, through, to);
path.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-arc-object" class="member">
<div class="member-link">
<a name="path-arc-object" href="#path-arc-object"><tt><b>Path.Arc</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates an circular arc path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-19">
var path = new Path.Arc({
from: [20, 20],
through: [60, 20],
to: [80, 80],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-regularpolygon-center-sides-radius" class="member">
<div class="member-link">
<a name="path-regularpolygon-center-sides-radius" href="#path-regularpolygon-center-sides-radius"><tt><b>Path.RegularPolygon</b>(center, sides, radius)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a regular polygon shaped path item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>center:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the center point of the polygon
</li>
<li>
<tt>sides:</tt>
<tt>Number</tt>
— the number of sides of the polygon
</li>
<li>
<tt>radius:</tt>
<tt>Number</tt>
— the radius of the polygon
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-20">
var center = new Point(50, 50);
var sides = 3;
var radius = 40;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-regularpolygon-object" class="member">
<div class="member-link">
<a name="path-regularpolygon-object" href="#path-regularpolygon-object"><tt><b>Path.RegularPolygon</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a regular polygon shaped path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-21">
var triangle = new Path.RegularPolygon({
center: [50, 50],
sides: 10,
radius: 40,
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-star-center-points-radius1-radius2" class="member">
<div class="member-link">
<a name="path-star-center-points-radius1-radius2" href="#path-star-center-points-radius1-radius2"><tt><b>Path.Star</b>(center, points, radius1, radius2)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a star shaped path item.</p>
<p>The largest of <code>radius1</code> and <code>radius2</code> will be the outer radius of the star. The smallest of radius1 and radius2 will be the inner radius.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>center:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the center point of the star
</li>
<li>
<tt>points:</tt>
<tt>Number</tt>
— the number of points of the star
</li>
<li>
<tt>radius1:</tt>
<tt>Number</tt>
</li>
<li>
<tt>radius2:</tt>
<tt>Number</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-22">
var center = new Point(50, 50);
var points = 12;
var radius1 = 25;
var radius2 = 40;
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
</div>
</div>
</div>
</div>
<div id="path-star-object" class="member">
<div class="member-link">
<a name="path-star-object" href="#path-star-object"><tt><b>Path.Star</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a star shaped path item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the path’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-23">
var path = new Path.Star({
center: [50, 50],
points: 12,
radius1: 25,
radius2: 40,
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="segments" class="member">
<div class="member-link">
<a name="segments" href="#segments"><tt><b>segments</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The segments contained within the path.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<div id="firstsegment" class="member">
<div class="member-link">
<a name="firstsegment" href="#firstsegment"><tt><b>firstSegment</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The first Segment contained within the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="lastsegment" class="member">
<div class="member-link">
<a name="lastsegment" href="#lastsegment"><tt><b>lastSegment</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The last Segment contained within the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Segment.html"><tt>Segment</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="curves" class="member">
<div class="member-link">
<a name="curves" href="#curves"><tt><b>curves</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The curves contained within the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Curve.html"><tt>Curve</tt></a> objects
</li>
</ul>
</div>
</div>
</div>
<div id="firstcurve" class="member">
<div class="member-link">
<a name="firstcurve" href="#firstcurve"><tt><b>firstCurve</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The first Curve contained within the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Curve.html"><tt>Curve</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="lastcurve" class="member">
<div class="member-link">
<a name="lastcurve" href="#lastcurve"><tt><b>lastCurve</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The last Curve contained within the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Curve.html"><tt>Curve</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="closed" class="member">
<div class="member-link">
<a name="closed" href="#closed"><tt><b>closed</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the path is closed. If it is closed, Paper.js connects the first and last segments.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-24">
var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(50, 75));
myPath.add(new Point(100, 25));
myPath.add(new Point(150, 75));
// Close the path:
myPath.closed = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
</div>
</div>
</div>
</div>
<div id="length" class="member">
<div class="member-link">
<a name="length" href="#length"><tt><b>length</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The approximate length of the path.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="area" class="member">
<div class="member-link">
<a name="area" href="#area"><tt><b>area</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The area that the path’s geometry is covering. Self-intersecting paths can contain sub-areas that cancel each other out.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="fullyselected" class="member">
<div class="member-link">
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the path and all its segments are selected. Cannot be <code>true</code> on an empty path.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<h4>Example:<span class="description">A path is fully selected, if all of its segments are selected:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-25">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
path.fullySelected = true;
var path2 = new Path.Circle({
center: [180, 50],
radius: 35
});
// Deselect the second segment of the second path:
path2.segments[1].selected = false;
// If the path is fully selected (which it is),
// set its fill color to red:
if (path.fullySelected) {
path.fillColor = 'red';
}
// If the second path is fully selected (which it isn't, since we just
// deselected its second segment),
// set its fill color to red:
if (path2.fullySelected) {
path2.fillColor = 'red';
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="add-segment" class="member">
<div class="member-link">
<a name="add-segment" href="#add-segment"><tt><b>add</b>(...segment)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Adds one or more segments to the end of the <a href="../classes/Path.html#segments"><tt>segments</tt></a> array of this path.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>segment:</tt>
<a href="../classes/Segment.html"><tt>Segment</tt></a>⟋<a href="../classes/Point.html"><tt>Point</tt></a>⟋Array of <tt>Numbers</tt>
— the segment or point to be added.
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a>⟋Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — the added segment(s). This is not necessarily the same object, e.g. if the segment to be added already belongs to another path.
</li>
</ul>
<h4>Example:<span class="description">Adding segments to a path using point objects:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-26">
var path = new Path({
strokeColor: 'black'
});
// Add a segment at {x: 30, y: 75}
path.add(new Point(30, 75));
// Add two segments in one go at {x: 100, y: 20}
// and {x: 170, y: 75}:
path.add(new Point(100, 20), new Point(170, 75));
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
</div>
<h4>Example:<span class="description">Adding segments to a path using arrays containing number pairs:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-27">
var path = new Path({
strokeColor: 'black'
});
// Add a segment at {x: 30, y: 75}
path.add([30, 75]);
// Add two segments in one go at {x: 100, y: 20}
// and {x: 170, y: 75}:
path.add([100, 20], [170, 75]);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
</div>
<h4>Example:<span class="description">Adding segments to a path using objects:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-28">
var path = new Path({
strokeColor: 'black'
});
// Add a segment at {x: 30, y: 75}
path.add({x: 30, y: 75});
// Add two segments in one go at {x: 100, y: 20}
// and {x: 170, y: 75}:
path.add({x: 100, y: 20}, {x: 170, y: 75});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
</div>
<h4>Example:<span class="description">Adding a segment with handles to a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-29">
var path = new Path({
strokeColor: 'black'
});
path.add(new Point(30, 75));
// Add a segment with handles:
var point = new Point(100, 20);
var handleIn = new Point(-50, 0);
var handleOut = new Point(50, 0);
var added = path.add(new Segment(point, handleIn, handleOut));
// Select the added segment, so we can see its handles:
added.selected = true;
path.add(new Point(170, 75));
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
</div>
</div>
</div>
</div>
<div id="insert-index-segment" class="member">
<div class="member-link">
<a name="insert-index-segment" href="#insert-index-segment"><tt><b>insert</b>(index, segment)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Inserts one or more segments at a given index in the list of this path’s segments.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>index:</tt>
<tt>Number</tt>
— the index at which to insert the segment
</li>
<li>
<tt>segment:</tt>
<a href="../classes/Segment.html"><tt>Segment</tt></a>⟋<a href="../classes/Point.html"><tt>Point</tt></a>
— the segment or point to be inserted.
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the added segment. This is not necessarily the same object, e.g. if the segment to be added already belongs to another path
</li>
</ul>
<h4>Example:<span class="description">Inserting a segment:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-30">
var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(50, 75));
myPath.add(new Point(150, 75));
// Insert a new segment into myPath at index 1:
myPath.insert(1, new Point(100, 25));
// Select the segment which we just inserted:
myPath.segments[1].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
</div>
<h4>Example:<span class="description">Inserting multiple segments:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-31">
var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(50, 75));
myPath.add(new Point(150, 75));
// Insert two segments into myPath at index 1:
myPath.insert(1, [80, 25], [120, 25]);
// Select the segments which we just inserted:
myPath.segments[1].selected = true;
myPath.segments[2].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
</div>
</div>
</div>
</div>
<div id="addsegments-segments" class="member">
<div class="member-link">
<a name="addsegments-segments" href="#addsegments-segments"><tt><b>addSegments</b>(segments)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Adds an array of segments (or types that can be converted to segments) to the end of the <a href="../classes/Path.html#segments"><tt>segments</tt></a> array.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>segments:</tt>
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array of the added segments. These segments are not necessarily the same objects, e.g. if the segment to be added already belongs to another path
</li>
</ul>
<h4>Example:<span class="description">Adding an array of Point objects:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-32">
var path = new Path({
strokeColor: 'black'
});
var points = [new Point(30, 50), new Point(170, 50)];
path.addSegments(points);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
</div>
<h4>Example:<span class="description">Adding an array of [x, y] arrays:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-33">
var path = new Path({
strokeColor: 'black'
});
var array = [[30, 75], [100, 20], [170, 75]];
path.addSegments(array);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
</div>
<h4>Example:<span class="description">Adding segments from one path to another:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-34">
var path = new Path({
strokeColor: 'black'
});
path.addSegments([[30, 75], [100, 20], [170, 75]]);
var path2 = new Path();
path2.strokeColor = 'red';
// Add the second and third segments of path to path2:
path2.add(path.segments[1], path.segments[2]);
// Move path2 30pt to the right:
path2.position.x += 30;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
</div>
</div>
</div>
</div>
<div id="insertsegments-index-segments" class="member">
<div class="member-link">
<a name="insertsegments-index-segments" href="#insertsegments-index-segments"><tt><b>insertSegments</b>(index, segments)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Inserts an array of segments at a given index in the path’s <a href="../classes/Path.html#segments"><tt>segments</tt></a> array.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>index:</tt>
<tt>Number</tt>
— the index at which to insert the segments
</li>
<li>
<tt>segments:</tt>
Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
— the segments to be inserted
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array of the added segments. These segments are not necessarily the same objects, e.g. if the segment to be added already belongs to another path
</li>
</ul>
</div>
</div>
</div>
<div id="removesegment-index" class="member">
<div class="member-link">
<a name="removesegment-index" href="#removesegment-index"><tt><b>removeSegment</b>(index)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Removes the segment at the specified index of the path’s <a href="../classes/Path.html#segments"><tt>segments</tt></a> array.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>index:</tt>
<tt>Number</tt>
— the index of the segment to be removed
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the removed segment
</li>
</ul>
<h4>Example:<span class="description">Removing a segment from a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-35">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var path = new Path.Circle({
center: new Point(80, 50),
radius: 35,
strokeColor: 'black'
});
// Remove its second segment:
path.removeSegment(1);
// Select the path, so we can see its segments:
path.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
</div>
</div>
</div>
</div>
<div id="removesegments" class="member">
<div class="member-link">
<a name="removesegments" href="#removesegments"><tt><b>removeSegments</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Removes all segments from the path’s <a href="../classes/Path.html#segments"><tt>segments</tt></a> array.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array containing the removed segments
</li>
</ul>
</div>
</div>
</div>
<div id="removesegments-from" class="member">
<div class="member-link">
<a name="removesegments-from" href="#removesegments-from"><tt><b>removeSegments</b>(from[, to])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Removes the segments from the specified <code>from</code> index to the <code>to</code> index from the path’s <a href="../classes/Path.html#segments"><tt>segments</tt></a> array.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>from:</tt>
<tt>Number</tt>
— the beginning index, inclusive
</li>
<li>
<tt>to:</tt>
<tt>Number</tt>
— the ending index, exclusive
— optional, default: <tt>segments.length</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt> — an array containing the removed segments
</li>
</ul>
<h4>Example:<span class="description">Removing segments from a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-36">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var path = new Path.Circle({
center: new Point(80, 50),
radius: 35,
strokeColor: 'black'
});
// Remove the segments from index 1 till index 2:
path.removeSegments(1, 2);
// Select the path, so we can see its segments:
path.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
</div>
</div>
</div>
</div>
<div id="hashandles" class="member">
<div class="member-link">
<a name="hashandles" href="#hashandles"><tt><b>hasHandles</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks if any of the curves in the path have curve handles set.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the path has curve handles set, <tt>false</tt> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Segment.html#hashandles"><tt>segment.hasHandles</tt></a>()</tt></li>
<li><tt><a href="../classes/Curve.html#hashandles"><tt>curve.hasHandles</tt></a>()</tt></li>
</ul>
</div>
</div>
</div>
<div id="clearhandles" class="member">
<div class="member-link">
<a name="clearhandles" href="#clearhandles"><tt><b>clearHandles</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Clears the path’s handles by setting their coordinates to zero, turning the path into a polygon (or a polyline if it isn’t closed).</p>
</div>
</div>
</div>
<div id="divideat-location" class="member">
<div class="member-link">
<a name="divideat-location" href="#divideat-location"><tt><b>divideAt</b>(location)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Divides the path on the curve at the given offset or location into two curves, by inserting a new segment at the given location.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>location:</tt>
<tt>Number</tt>⟋<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
— the offset or location on the path at which to divide the existing curve by inserting a new segment
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the newly inserted segment if the location is valid, <code>null</code> otherwise
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Curve.html#divideat-location"><tt>curve.divideAt(location)</tt></a></tt></li>
</ul>
</div>
</div>
</div>
<div id="splitat-location" class="member">
<div class="member-link">
<a name="splitat-location" href="#splitat-location"><tt><b>splitAt</b>(location)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Splits the path at the given offset or location. After splitting, the path will be open. If the path was open already, splitting will result in two paths.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>location:</tt>
<tt>Number</tt>⟋<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
— the offset or location at which to split the path
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path after splitting, if any
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-37">
var path = new Path.Circle({
center: view.center,
radius: 40,
strokeColor: 'black'
});
var pointOnCircle = view.center + {
length: 40,
angle: 30
};
var location = path.getNearestLocation(pointOnCircle);
path.splitAt(location);
path.lastSegment.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
</div>
<h4>Example:<span class="description">Splitting an open path Draw a V shaped path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-38">
var path = new Path([20, 20], [50, 80], [80, 20]);
path.strokeColor =