paper 0.15.0 → 0.17.0

package/dist/docs/classes/Path.html

@@ -1350,6 +1350,46 @@ var path = new Path.Star({
 		<h2>Properties</h2>
 		
 			
+<div id="strokeprofile" class="member">
+<div class="member-link">
+<a name="strokeprofile" href="#strokeprofile"><tt><b>strokeProfile</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The stroke profile of the path: the stops along it that set the pen that draws its stroke, an ellipse with a width, as a factor of its <a href="../classes/Style.html#strokewidth"><tt>style.strokeWidth</tt></a>, an aspect and an angle, see <a href="../classes/StrokeProfileStop.html"><tt>StrokeProfileStop</tt></a>. The stops are sorted by their offsets. Between the stops that set a value, it changes along the path, easing into and out of smooth stops and in straight lines from the others, see <a href="../classes/StrokeProfileStop.html#smooth"><tt>strokeProfileStop.smooth</tt></a>, and beyond the ends of open paths, it stays as at the first and last of them. Two stops at the same offset make a step. The stops stay between the same segments when they move. Without a stroke profile, the stroke is drawn with a round pen of the stroke width all along.</p>
+<p>It is a property of the path, not of its style, as it is tied to its segments. It can be set to stops or plain objects describing them, <code>{ offset, width, aspect, angle, smooth }</code>, and JSON stores them with the indices that tie them to the segments instead of their offsets, <code>{ index, width, aspect, angle, smooth }</code>. Changing the returned array directly isn&rsquo;t tracked, as with <a href="../classes/Path.html#segments"><tt>segments</tt></a>.</p>
+<p>The path draws its stroke as the area that the pens sweep, filled with the stroke color, as <a href="../classes/PathItem.html#outline"><tt>pathItem.outline</tt></a>() returns it, and <a href="../classes/Item.html#strokebounds"><tt>item.strokeBounds</tt></a> and hit-testing measure that area. The children of compound paths are drawn with the stroke of their parent, without their profiles. With <a href="../classes/Style.html#strokescaling"><tt>style.strokeScaling</tt></a> off, the profile scales with the view. <a href="../classes/PathItem.html#offset"><tt>pathItem.offset</tt></a>(), the boolean operations, <a href="../classes/PathItem.html#interpolate"><tt>pathItem.interpolate</tt></a>() and SVG export return paths without the profile.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			Array of <a href="../classes/StrokeProfileStop.html"><tt>StrokeProfileStop</tt></a> objects⟋<tt>null</tt>
+		</li>
+	</ul>
+    
+	
+	<h4>Example:</h4>
+
+
+<pre><code>var path = new Path.Line([20, 50], [180, 50]);
+path.strokeColor = 'black';
+path.strokeWidth = 10;
+// Taper the stroke from half its width to twice its width:
+path.strokeProfile = [
+    { offset: 0, width: 0.5 },
+    { offset: path.length, width: 2 }
+];
+console.log(path.getStrokeProfileAt(80).width); // 1.25</code></pre>
+
+</div>
+
+</div>
+</div>
+		
+			
 <div id="segments" class="member">
 <div class="member-link">
 <a name="segments" href="#segments"><tt><b>segments</b></tt></a>
@@ -1357,7 +1397,7 @@ var path = new Path.Star({
 <div class="member-description hidden">
 
 <div class="member-text">
-	<p>The segments contained within the path.</p>
+	<p>The segments contained within the path. Segments that define a <a href="../classes/Segment.html#name"><tt>segment.name</tt></a> can also be accessed by name.</p>
 	
 	
 	
@@ -1369,7 +1409,28 @@ var path = new Path.Star({
 	</ul>
     
 	
-	
+	<h4>Example:<span class="description">Accessing segments by name:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-24">
+var path = new Path([20, 80], [50, 20], [80, 80]);
+path.strokeColor = 'black';
+
+// Set the name of the top segment:
+path.segments[1].name = 'top';
+
+// The segment can be accessed by name:
+path.segments['top'].point.y += 20;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
 </div>
 
 </div>
@@ -1543,7 +1604,7 @@ var path = new Path.Star({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-24">
+<script type="text/paperscript" canvas="canvas-25">
 var myPath = new Path();
 myPath.strokeColor = 'black';
 myPath.add(new Point(50, 75));
@@ -1553,7 +1614,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
 </div>
 
 
@@ -1646,7 +1707,7 @@ myPath.closed = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-25">
+<script type="text/paperscript" canvas="canvas-26">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -1674,7 +1735,7 @@ if (path2.fullySelected) {
     path2.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
 </div>
 
 
@@ -1694,6 +1755,59 @@ if (path2.fullySelected) {
 		<h2>Methods</h2>
 		
 	
+<div id="getstrokeprofileat-offset" class="member">
+<div class="member-link">
+<a name="getstrokeprofileat-offset" href="#getstrokeprofileat-offset"><tt><b>getStrokeProfileAt</b>(offset)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Returns the pen of the <a href="../classes/Path.html#strokeprofile"><tt>strokeProfile</tt></a> at the given offset along the path, as a stop that isn&rsquo;t on the path, with all its values: its width as a factor of the <a href="../classes/Style.html#strokewidth"><tt>style.strokeWidth</tt></a>, its aspect and its angle, <code>1</code>, <code>1</code> and <code>0</code> where no stop sets them. Where the profile has a step, it returns the values after it. Adding the stop to the profile keeps the values at the offset, and where they change in straight lines, also around it if the stop isn&rsquo;t smooth. As a smooth stop, the values ease into it and out of it.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the offset on the path, where <code>0</code> is at the  beginning of the path and <a href="../classes/Path.html#length"><tt>path.length</tt></a> at the end
+
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/StrokeProfileStop.html"><tt>StrokeProfileStop</tt></a></tt>&nbsp;&mdash;&nbsp;the pen at the offset
+</li>
+
+		
+	</ul>
+
+
+
+	
+	<h4>Example:</h4>
+
+
+<pre><code>var path = new Path.Line([20, 50], [180, 50]);
+path.strokeProfile = [
+    { offset: 0, width: 0.5 },
+    { offset: path.length, width: 2, angle: 90 }
+];
+// Add a stop halfway, with the values there:
+var stop = path.getStrokeProfileAt(path.length / 2);
+console.log(stop.width, stop.aspect, stop.angle); // 1.25 1 90
+path.strokeProfile = path.strokeProfile.concat(stop);</code></pre>
+
+</div>
+</div>
+</div>
+
+	
 <div id="add-segment" class="member">
 <div class="member-link">
 <a name="add-segment" href="#add-segment"><tt><b>add</b>(...segment)</tt></a>
@@ -1737,7 +1851,7 @@ if (path2.fullySelected) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-26">
+<script type="text/paperscript" canvas="canvas-27">
 var path = new Path({
     strokeColor: 'black'
 });
@@ -1749,7 +1863,7 @@ path.add(new Point(30, 75));
 // 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 class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
 </div>
 
 
@@ -1761,7 +1875,7 @@ path.add(new Point(100, 20), new Point(170, 75));
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-27">
+<script type="text/paperscript" canvas="canvas-28">
 var path = new Path({
     strokeColor: 'black'
 });
@@ -1773,7 +1887,7 @@ path.add([30, 75]);
 // 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 class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
 </div>
 
 
@@ -1785,7 +1899,7 @@ path.add([100, 20], [170, 75]);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-28">
+<script type="text/paperscript" canvas="canvas-29">
 var path = new Path({
     strokeColor: 'black'
 });
@@ -1797,7 +1911,7 @@ path.add({x: 30, y: 75});
 // 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 class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
 </div>
 
 
@@ -1809,7 +1923,7 @@ path.add({x: 100, y: 20}, {x: 170, y: 75});
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-29">
+<script type="text/paperscript" canvas="canvas-30">
 var path = new Path({
     strokeColor: 'black'
 });
@@ -1827,7 +1941,7 @@ added.selected = true;
 
 path.add(new Point(170, 75));
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
 </div>
 
 
@@ -1886,7 +2000,7 @@ path.add(new Point(170, 75));
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-30">
+<script type="text/paperscript" canvas="canvas-31">
 var myPath = new Path();
 myPath.strokeColor = 'black';
 myPath.add(new Point(50, 75));
@@ -1898,7 +2012,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
 </div>
 
 
@@ -1910,7 +2024,7 @@ myPath.segments[1].selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-31">
+<script type="text/paperscript" canvas="canvas-32">
 var myPath = new Path();
 myPath.strokeColor = 'black';
 myPath.add(new Point(50, 75));
@@ -1923,7 +2037,7 @@ myPath.insert(1, [80, 25], [120, 25]);
 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 class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
 </div>
 
 
@@ -1975,14 +2089,14 @@ Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-32">
+<script type="text/paperscript" canvas="canvas-33">
 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 class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
 </div>
 
 
@@ -1994,14 +2108,14 @@ path.addSegments(points);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-33">
+<script type="text/paperscript" canvas="canvas-34">
 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 class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
 </div>
 
 
@@ -2013,7 +2127,7 @@ path.addSegments(array);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-34">
+<script type="text/paperscript" canvas="canvas-35">
 var path = new Path({
     strokeColor: 'black'
 });
@@ -2028,7 +2142,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
 </div>
 
 
@@ -2128,7 +2242,7 @@ Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-35">
+<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({
@@ -2143,7 +2257,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
 </div>
 
 
@@ -2231,7 +2345,7 @@ path.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-36">
+<script type="text/paperscript" canvas="canvas-37">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var path = new Path.Circle({
@@ -2246,7 +2360,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
 </div>
 
 
@@ -2261,7 +2375,7 @@ path.selected = true;
 </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>
+	<p>Checks if any of the curves in the path have curve handles set. Handles of which both coordinates are 0 within a tolerance of 1e-12 count as not set, see <a href="../classes/Point.html#iszero"><tt>point.isZero</tt></a>().</p>
     
 	
 	
@@ -2403,7 +2517,7 @@ path.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-37">
+<script type="text/paperscript" canvas="canvas-38">
 var path = new Path.Circle({
     center: view.center,
     radius: 40,
@@ -2420,7 +2534,7 @@ 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 class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
 </div>
 
 
@@ -2432,7 +2546,7 @@ path.lastSegment.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-38">
+<script type="text/paperscript" canvas="canvas-39">
 var path = new Path([20, 20], [50, 80], [80, 20]);
 path.strokeColor = 'black';
 
@@ -2444,7 +2558,7 @@ var path2 = path.splitAt(path.length / 2);
 path2.strokeColor = 'red';
 path2.position.x += 20;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
 </div>
 
 
@@ -2456,7 +2570,7 @@ path2.position.x += 20;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-39">
+<script type="text/paperscript" canvas="canvas-40">
 var path = new Path.Rectangle({
     from: [20, 20],
     to: [80, 80],
@@ -2473,7 +2587,7 @@ path.firstSegment.point.x += 20;
 // Select the first segment:
 path.firstSegment.selected = true;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
 </div>
 
 
@@ -2523,7 +2637,7 @@ path.firstSegment.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-40">
+<script type="text/paperscript" canvas="canvas-41">
 var path = new Path({
     segments: [[30, 25], [30, 75]],
     strokeColor: 'black'
@@ -2537,7 +2651,7 @@ var path2 = new Path({
 // Join the paths:
 path.join(path2);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
 </div>
 
 
@@ -2549,7 +2663,7 @@ path.join(path2);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-41">
+<script type="text/paperscript" canvas="canvas-42">
 var path = new Path({
     segments: [[30, 25], [30, 75]],
     strokeColor: 'black'
@@ -2570,7 +2684,7 @@ path.join(path2);
 // Select the path to show that they have joined:
 path.selected = true;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
 </div>
 
 
@@ -2582,7 +2696,7 @@ path.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-42">
+<script type="text/paperscript" canvas="canvas-43">
 var path = new Path({
     segments: [[30, 25], [80, 25], [80, 75]],
     strokeColor: 'black'
@@ -2602,7 +2716,7 @@ path.join(path2);
 // Select the path to show that they have joined:
 path.selected = true;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
 </div>
 
 
@@ -2871,7 +2985,7 @@ path.selected = true;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-43">
+<script type="text/paperscript" canvas="canvas-44">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -2894,7 +3008,7 @@ var circle = new Path.Circle({
     fillColor: 'red'
 });
 </script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-43"></canvas></div>
+<div class="canvas"><canvas width="516" height="150" id="canvas-44"></canvas></div>
 </div>
 
 
@@ -2906,7 +3020,7 @@ var circle = new Path.Circle({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-44">
+<script type="text/paperscript" canvas="canvas-45">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -2931,7 +3045,7 @@ for (var i = 0; i < amount + 1; i++) {
     });
 }
 </script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-44"></canvas></div>
+<div class="canvas"><canvas width="516" height="150" id="canvas-45"></canvas></div>
 </div>
 
 
@@ -2983,7 +3097,7 @@ for (var i = 0; i < amount + 1; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-45">
+<script type="text/paperscript" canvas="canvas-46">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -3008,7 +3122,7 @@ var line = new Path({
     strokeColor: 'red'
 })
 </script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-45"></canvas></div>
+<div class="canvas"><canvas width="516" height="150" id="canvas-46"></canvas></div>
 </div>
 
 
@@ -3020,7 +3134,7 @@ var line = new Path({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-46">
+<script type="text/paperscript" canvas="canvas-47">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -3047,7 +3161,7 @@ for (var i = 0; i < amount + 1; i++) {
     })
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-46"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-47"></canvas></div>
 </div>
 
 
@@ -3099,7 +3213,7 @@ for (var i = 0; i < amount + 1; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-47">
+<script type="text/paperscript" canvas="canvas-48">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -3124,7 +3238,7 @@ var line = new Path({
     strokeColor: 'red'
 });
 </script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-47"></canvas></div>
+<div class="canvas"><canvas width="516" height="150" id="canvas-48"></canvas></div>
 </div>
 
 
@@ -3136,7 +3250,7 @@ var line = new Path({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-48">
+<script type="text/paperscript" canvas="canvas-49">
 // Create an arc shaped path:
 var path = new Path({
     strokeColor: 'black'
@@ -3163,7 +3277,7 @@ for (var i = 0; i < amount + 1; i++) {
     });
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-48"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-49"></canvas></div>
 </div>
 
 
@@ -3346,6 +3460,91 @@ for (var i = 0; i < amount + 1; i++) {
 <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
 
 	
+<div id="effects" class="member">
+<div class="member-link">
+<a name="effects" href="#effects"><tt><b>effects</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The live effects of the item, in the order in which they apply, as the instances of the <tt>Effecteffects</tt> that they use. They derive what is drawn from the item without changing it: drawing draws their output, and <a href="../classes/Item.html#previewbounds"><tt>previewBounds</tt></a> measures it, while hit testing, <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> and <a href="../classes/Item.html#strokebounds"><tt>strokeBounds</tt></a> stay with the item itself. It is set to plain objects describing them, <code>{ type,
+parameters, visible }</code>, with the <code>type</code> of the effect. Changing the returned array directly isn&rsquo;t tracked, as with <a href="../classes/Path.html#segments"><tt>path.segments</tt></a>.</p>
+<p>Paper.js has these effects, and <a href="../classes/Effect.html"><tt>Effect</tt></a> creates more:</p>
+<ul>
+  <li><code>offset</code>: offsets the paths, see <a href="../classes/PathItem.html#offset"><tt>pathItem.offset</tt></a>(), with  the parameters <code>distance</code> (<code>0</code>), <code>join</code> (<code>&#39;miter&#39;</code>) and  <code>miterLimit</code> (<code>10</code>).</li>
+  <li><code>outline</code>: outlines the strokes of the paths as filled areas next  to their fills, see <a href="../classes/PathItem.html#outline"><tt>pathItem.outline</tt></a>(), following their  <a href="../classes/Path.html#strokeprofile"><tt>path.strokeProfile</tt></a>.</li>
+</ul>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			Array of <a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a> objects
+		</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-50">
+var path = new Path.Star({
+    center: view.center,
+    points: 5,
+    radius1: 20,
+    radius2: 40,
+    strokeColor: 'black',
+    strokeWidth: 8
+});
+path.effects = [
+    { type: 'offset', parameters: { distance: 10, join: 'round' } },
+    { type: 'outline' }
+];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="previewbounds-matrix" class="member">
+<div class="member-link">
+<a name="previewbounds-matrix" href="#previewbounds-matrix"><tt><b>previewBounds</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The bounds of what the item looks like with its effects, in the coordinate space of its parent: of their output with its strokes, or of its children&rsquo;s with their effects, and its <a href="../classes/Item.html#strokebounds"><tt>strokeBounds</tt></a> without them, as Illustrator&rsquo;s &ldquo;Use Preview Bounds&rdquo;.</p>
+	
+		<p>Read only.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+		</li>
+	</ul>
+    
+	
+	
+</div>
+
+</div>
+</div>
+
+	
 <div id="key" class="member">
 <div class="member-link">
 <a name="key" href="#key"><tt><b>key</b></tt></a>
@@ -3458,7 +3657,7 @@ for (var i = 0; i < amount + 1; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-49">
+<script type="text/paperscript" canvas="canvas-51">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -3473,7 +3672,7 @@ group.addChild(path);
 // The path can be accessed by name:
 group.children['example'].fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
 </div>
 
 
@@ -3511,7 +3710,7 @@ group.children['example'].fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-50">
+<script type="text/paperscript" canvas="canvas-52">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 30
@@ -3522,7 +3721,7 @@ circle.style = {
     strokeWidth: 5
 };
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
 </div>
 
 
@@ -3534,7 +3733,7 @@ circle.style = {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-51">
+<script type="text/paperscript" canvas="canvas-53">
 var path = new Path.Circle({
     center: [50, 50],
     radius: 30,
@@ -3549,7 +3748,7 @@ var path2 = new Path.Circle({
 // Copy the path style of path:
 path2.style = path.style;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
 </div>
 
 
@@ -3561,7 +3760,7 @@ path2.style = path.style;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-52">
+<script type="text/paperscript" canvas="canvas-54">
 var myStyle = {
     fillColor: 'red',
     strokeColor: 'blue',
@@ -3580,7 +3779,7 @@ var path2 = new Path.Circle({
 });
 path2.style = myStyle;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
 </div>
 
 
@@ -3622,7 +3821,7 @@ path2.style = myStyle;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-53">
+<script type="text/paperscript" canvas="canvas-55">
 var unlockedItem = new Path.Circle({
     center: view.center - [35, 0],
     radius: 30,
@@ -3649,7 +3848,7 @@ new PointText({
     justification: 'center'
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
 </div>
 
 
@@ -3691,7 +3890,7 @@ new PointText({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-54">
+<script type="text/paperscript" canvas="canvas-56">
 var path = new Path.Circle({
     center: [50, 50],
     radius: 20,
@@ -3701,7 +3900,7 @@ var path = new Path.Circle({
 // Hide the path:
 path.visible = false;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
 </div>
 
 
@@ -3749,7 +3948,7 @@ path.visible = false;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-55">
+<script type="text/paperscript" canvas="canvas-57">
 // Create a white rectangle in the background
 // with the same dimensions as the view:
 var background = new Path.Rectangle(view.bounds);
@@ -3770,7 +3969,7 @@ var circle2 = new Path.Circle({
 // Set the blend mode of circle2:
 circle2.blendMode = 'multiply';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
 </div>
 
 
@@ -3812,7 +4011,7 @@ circle2.blendMode = 'multiply';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-56">
+<script type="text/paperscript" canvas="canvas-58">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 35,
@@ -3830,7 +4029,7 @@ var circle2 = new Path.Circle({
 // Make circle2 50% transparent:
 circle2.opacity = 0.5;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
 </div>
 
 
@@ -3953,14 +4152,14 @@ circle.textWrap = { offset: 10 };</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-57">
+<script type="text/paperscript" canvas="canvas-59">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
 });
 path.selected = true; // Select the path
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
 </div>
 
 
@@ -4091,7 +4290,7 @@ console.log(path.data.pets.length); // 1</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-58">
+<script type="text/paperscript" canvas="canvas-60">
 // Create a circle at position { x: 10, y: 10 }
 var circle = new Path.Circle({
     center: new Point(10, 10),
@@ -4105,7 +4304,7 @@ circle.position = new Point(20, 20);
 // Move the circle 100 points to the right and 50 points down
 circle.position += new Point(100, 50);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
 </div>
 
 
@@ -4117,7 +4316,7 @@ circle.position += new Point(100, 50);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-59">
+<script type="text/paperscript" canvas="canvas-61">
 // Create a circle at position { x: 20, y: 20 }
 var circle = new Path.Circle({
     center: new Point(20, 20),
@@ -4128,7 +4327,7 @@ var circle = new Path.Circle({
 // Move the circle 100 points to the right
 circle.position.x += 100;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
 </div>
 
 
@@ -4654,7 +4853,7 @@ console.log(group.children[0] == path); // true</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-60">
+<script type="text/paperscript" canvas="canvas-62">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -4667,7 +4866,7 @@ group.addChild(path);
 // Access the path through the group's children array:
 group.children[0].fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
 </div>
 
 
@@ -4679,7 +4878,7 @@ group.children[0].fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-61">
+<script type="text/paperscript" canvas="canvas-63">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -4694,7 +4893,7 @@ group.addChild(path);
 // The path can be accessed by name:
 group.children['example'].fillColor = 'orange';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-63"></canvas></div>
 </div>
 
 
@@ -4706,7 +4905,7 @@ group.children['example'].fillColor = 'orange';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-62">
+<script type="text/paperscript" canvas="canvas-64">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -4718,7 +4917,7 @@ group.children = [path];
 // The path is the first child of the group:
 group.firstChild.fillColor = 'green';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-64"></canvas></div>
 </div>
 
 
@@ -4895,7 +5094,7 @@ group.firstChild.fillColor = 'green';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-63">
+<script type="text/paperscript" canvas="canvas-65">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -4906,7 +5105,7 @@ var circle = new Path.Circle({
 // Set its stroke color to RGB red:
 circle.strokeColor = new Color(1, 0, 0);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-63"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-65"></canvas></div>
 </div>
 
 
@@ -4943,7 +5142,7 @@ circle.strokeColor = new Color(1, 0, 0);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-64">
+<script type="text/paperscript" canvas="canvas-66">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -4955,7 +5154,7 @@ var circle = new Path.Circle({
 // Set its stroke width to 10:
 circle.strokeWidth = 10;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-64"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-66"></canvas></div>
 </div>
 
 
@@ -5002,7 +5201,7 @@ circle.strokeWidth = 10;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-65">
+<script type="text/paperscript" canvas="canvas-67">
 var line = new Path({
     segments: [[80, 50], [420, 50]],
     strokeColor: 'black',
@@ -5023,7 +5222,7 @@ var line2 = line.clone();
 line2.position.y += 100;
 line2.strokeCap = 'butt';
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-65"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-67"></canvas></div>
 </div>
 
 
@@ -5070,7 +5269,7 @@ line2.strokeCap = 'butt';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-66">
+<script type="text/paperscript" canvas="canvas-68">
 var path = new Path({
     segments: [[80, 100], [120, 40], [160, 100]],
     strokeColor: 'black',
@@ -5087,7 +5286,7 @@ var path3 = path2.clone();
 path3.position.x += path3.bounds.width * 1.5;
 path3.strokeJoin = 'bevel';
 </script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-66"></canvas></div>
+<div class="canvas"><canvas width="516" height="120" id="canvas-68"></canvas></div>
 </div>
 
 
@@ -5191,7 +5390,7 @@ path3.strokeJoin = 'bevel';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-67">
+<script type="text/paperscript" canvas="canvas-69">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 40,
@@ -5202,7 +5401,7 @@ var path = new Path.Circle({
 // Set the dashed stroke to [10pt dash, 4pt gap]:
 path.dashArray = [10, 4];
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-67"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-69"></canvas></div>
 </div>
 
 
@@ -5237,6 +5436,42 @@ path.dashArray = [10, 4];
     
 	
 	
+</div>
+
+</div>
+</div>
+
+	
+<div id="paintorder" class="member">
+<div class="member-link">
+<a name="paintorder" href="#paintorder"><tt><b>paintOrder</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The order in which the fill and the stroke are painted, as in SVG&rsquo;s <code>paint-order</code>, named after what is painted first: <code>&#39;fill&#39;</code> paints the fill first, <code>&#39;stroke&#39;</code> paints the stroke first, so the fill covers its inner half.</p>
+	
+	
+		<ul class="member-list">
+			<h4>Values:</h4>
+			<li><tt>'fill'</tt>, <tt>'stroke'</tt></li>
+		</ul>
+	
+	
+		<ul class="member-list">
+			<h4>Default:</h4>
+			<li><tt>'fill'</tt></li>
+		</ul>
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>String</tt>
+		</li>
+	</ul>
+    
+	
+	
 </div>
 
 </div>
@@ -5272,7 +5507,7 @@ path.dashArray = [10, 4];
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-68">
+<script type="text/paperscript" canvas="canvas-70">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -5283,7 +5518,7 @@ var circle = new Path.Circle({
 // Set the fill color of the circle to RGB red:
 circle.fillColor = new Color(1, 0, 0);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-68"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-70"></canvas></div>
 </div>
 
 
@@ -5358,7 +5593,7 @@ circle.fillColor = new Color(1, 0, 0);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-69">
+<script type="text/paperscript" canvas="canvas-71">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 35,
@@ -5371,7 +5606,7 @@ var circle = new Path.Circle({
     shadowOffset: new Point(5, 5)
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-69"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-71"></canvas></div>
 </div>
 
 
@@ -5512,7 +5747,7 @@ var circle = new Path.Circle({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-70">
+<script type="text/paperscript" canvas="canvas-72">
 // Create a rectangle shaped path with its top left point at:
 // {x: 50, y: 25} and a size of {width: 50, height: 50}
 var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
@@ -5523,7 +5758,7 @@ path.onFrame = function(event) {
     this.rotate(3);
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-70"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-72"></canvas></div>
 </div>
 
 
@@ -5567,7 +5802,7 @@ path.onFrame = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-71">
+<script type="text/paperscript" canvas="canvas-73">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -5581,7 +5816,7 @@ path.onMouseDown = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-71"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-73"></canvas></div>
 </div>
 
 
@@ -5593,7 +5828,7 @@ path.onMouseDown = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-72">
+<script type="text/paperscript" canvas="canvas-74">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -5611,7 +5846,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-72"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-74"></canvas></div>
 </div>
 
 
@@ -5655,7 +5890,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-73">
+<script type="text/paperscript" canvas="canvas-75">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -5668,7 +5903,7 @@ path.onMouseDrag = function(event) {
     path.position += event.delta;
 }
 </script>
-<div class="canvas"><canvas width="516" height="240" id="canvas-73"></canvas></div>
+<div class="canvas"><canvas width="516" height="240" id="canvas-75"></canvas></div>
 </div>
 
 
@@ -5712,7 +5947,7 @@ path.onMouseDrag = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-74">
+<script type="text/paperscript" canvas="canvas-76">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -5726,7 +5961,7 @@ path.onMouseUp = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-74"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-76"></canvas></div>
 </div>
 
 
@@ -5770,7 +6005,7 @@ path.onMouseUp = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-75">
+<script type="text/paperscript" canvas="canvas-77">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -5784,7 +6019,7 @@ path.onClick = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-75"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-77"></canvas></div>
 </div>
 
 
@@ -5796,7 +6031,7 @@ path.onClick = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-76">
+<script type="text/paperscript" canvas="canvas-78">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -5814,7 +6049,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-76"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-78"></canvas></div>
 </div>
 
 
@@ -5858,7 +6093,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-77">
+<script type="text/paperscript" canvas="canvas-79">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -5872,7 +6107,7 @@ path.onDoubleClick = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-77"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-79"></canvas></div>
 </div>
 
 
@@ -5884,7 +6119,7 @@ path.onDoubleClick = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-78">
+<script type="text/paperscript" canvas="canvas-80">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -5902,7 +6137,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-78"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-80"></canvas></div>
 </div>
 
 
@@ -5946,7 +6181,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-79">
+<script type="text/paperscript" canvas="canvas-81">
 // Create a circle shaped path at the center of the view:
     var path = new Path.Circle({
     center: view.center,
@@ -5960,7 +6195,7 @@ path.onMouseMove = function(event) {
     this.opacity = Math.random();
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-79"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-81"></canvas></div>
 </div>
 
 
@@ -6004,7 +6239,7 @@ path.onMouseMove = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-80">
+<script type="text/paperscript" canvas="canvas-82">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -6022,7 +6257,7 @@ path.onMouseLeave = function(event) {
     this.fillColor = 'black';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-80"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-82"></canvas></div>
 </div>
 
 
@@ -6034,7 +6269,7 @@ path.onMouseLeave = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-81">
+<script type="text/paperscript" canvas="canvas-83">
 function enter(event) {
     this.fillColor = 'red';
 }
@@ -6056,7 +6291,7 @@ function onMouseDown(event) {
     path.onMouseLeave = leave;
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-81"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-83"></canvas></div>
 </div>
 
 
@@ -6100,7 +6335,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-82">
+<script type="text/paperscript" canvas="canvas-84">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -6113,7 +6348,7 @@ path.onMouseLeave = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-82"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-84"></canvas></div>
 </div>
 
 
@@ -6122,49 +6357,101 @@ path.onMouseLeave = function(event) {
 </div>
 </div>
 
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
 	
-<div id="set-props" class="member">
+<div id="ondraw" class="member">
 <div class="member-link">
-<a name="set-props" href="#set-props"><tt><b>set</b>(props)</tt></a>
+<a name="ondraw" href="#ondraw"><tt><b>onDraw</b></tt></a>
 </div>
 <div class="member-description hidden">
+
 <div class="member-text">
-	<p>Sets the properties of the passed object literal on this item to the values defined in the object literal, if the item has property of the given name (or a setter defined for it).</p>
-    
+	<p>The function to be called whenever the item is drawn: in views, in <a href="../classes/Item.html#rasterize"><tt>rasterize</tt></a>(), and once for each placement of a symbol whose definition contains it. It is called right before the item&rsquo;s default drawing, and draws with the canvas API beneath it, or replaces it by returning <code>false</code> or calling <code>event.preventDefault()</code>. The function receives a <a href="../classes/DrawEvent.html"><tt>DrawEvent</tt></a> object with these fields:</p>
 	
-<ul class="member-list">
-	<h4>Parameters:</h4>
 	
-	<li>
-<tt>props:</tt> 
-<tt>Object</tt>
-
-
-</li>
 	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>event.item: <a href="../classes/Item.html"><tt>Item</tt></a></tt> &mdash; the item that is drawn</li>
+<li><tt>event.context: <tt>CanvasRenderingContext2D</tt></tt> &mdash; the canvas context,  transformed into the item&rsquo;s coordinates</li>
+<li><tt>event.matrix: <a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt> &mdash; the matrix from the item&rsquo;s coordinates to  the pixels of the view, without its pixel ratio, for drawing things  at a size in pixels</li>
+<li><tt>event.pixelRatio: <tt>Number</tt></tt> &mdash; the device pixels per pixel: the  view&rsquo;s pixel ratio, or the resolution divided by 72 in  <a href="../classes/Item.html#rasterize"><tt>rasterize</tt></a>()</li>
+<li><tt>event.view: <a href="../classes/View.html"><tt>View</tt></a></tt> &mdash; the view drawn into, or <code>null</code> in  <a href="../classes/Item.html#rasterize"><tt>rasterize</tt></a>()
+What the handler draws isn&rsquo;t part of the item&rsquo;s hit testing, its bounds or its SVG export. In buffered groups, it is only called when the group draws its buffer again, see <a href="../classes/Group.html#buffered"><tt>group.buffered</tt></a>.</li>
 </ul>
-
 	
-	<ul class="member-list">
-		<h4>Returns:</h4>
-		
-			<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the item itself
-</li>
+	<h4>Example:<span class="description">Draw a hairline cross through the center of a circle, beneath it:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-85">
+var path = new Path.Circle({
+    center: view.center,
+    radius: 25,
+    fillColor: 'rgba(255, 0, 0, 0.5)'
+});
+
+path.onDraw = function(event) {
+    var ctx = event.context,
+        center = this.position,
+        scale = event.matrix.scaling.x;
+    ctx.beginPath();
+    ctx.moveTo(center.x - 40, center.y);
+    ctx.lineTo(center.x + 40, center.y);
+    ctx.moveTo(center.x, center.y - 40);
+    ctx.lineTo(center.x, center.y + 40);
+    ctx.lineWidth = 1 / scale;
+    ctx.stroke();
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-85"></canvas></div>
+</div>
 
-		
-	</ul>
 
+</div>
 
+</div>
+</div>
 
 	
-	<h4>Example:<span class="description">Setting properties through an object literal</span></h4>
+<div id="ondrawselection" class="member">
+<div class="member-link">
+<a name="ondrawselection" href="#ondrawselection"><tt><b>onDrawSelection</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The function to be called when the selection of the selected item is drawn, over all the content. It is called right before the item&rsquo;s default selection drawing, and draws with the canvas API beneath it, or replaces it by returning <code>false</code> or calling <code>event.preventDefault()</code>. The function receives a <a href="../classes/DrawEvent.html"><tt>DrawEvent</tt></a> object with these fields:</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>event.item: <a href="../classes/Item.html"><tt>Item</tt></a></tt> &mdash; the selected item</li>
+<li><tt>event.context: <tt>CanvasRenderingContext2D</tt></tt> &mdash; the canvas context, in  the pixels of the view, with the selection color as its <code>strokeStyle</code>  and <code>fillStyle</code>, and a <code>lineWidth</code> of 1</li>
+<li><tt>event.matrix: <a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt> &mdash; the matrix from the item&rsquo;s coordinates to  the pixels of the view</li>
+<li><tt>event.size: <tt>Number</tt></tt> &mdash; the size of the handles, see  <a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a></li>
+<li><tt>event.color: <a href="../classes/Color.html"><tt>Color</tt></a></tt> &mdash; the selection color, see  <a href="../classes/Item.html#selectedcolor"><tt>selectedColor</tt></a></li>
+<li><tt>event.view: <a href="../classes/View.html"><tt>View</tt></a></tt> &mdash; the view drawn into
+What the handler draws isn&rsquo;t part of the item&rsquo;s hit testing, its bounds or its SVG export.</li>
+</ul>
+	
+	<h4>Example:<span class="description">Draw the selection of a path as a dot at each segment:</span></h4>
 
 <div class="paperscript split">
 
@@ -6172,49 +6459,60 @@ path.onMouseLeave = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-83">
-var circle = new Path.Circle({
-    center: [80, 50],
-    radius: 35
-});
-
-circle.set({
-    strokeColor: 'red',
-    strokeWidth: 10,
-    fillColor: 'black',
+<script type="text/paperscript" canvas="canvas-86">
+var path = new Path.Star({
+    center: view.center,
+    points: 5,
+    radius1: 20,
+    radius2: 40,
+    strokeColor: 'black',
     selected: true
 });
+
+path.onDrawSelection = function(event) {
+    var ctx = event.context;
+    this.segments.forEach(function(segment) {
+        var point = event.matrix.transform(segment.point);
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, event.size, 0, Math.PI * 2);
+        ctx.fill();
+    });
+    return false;
+}
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-83"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-86"></canvas></div>
 </div>
 
 
+</div>
+
 </div>
 </div>
+
 </div>
 
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
 	
-<div id="clone" class="member">
+<div id="addeffect-effect" class="member">
 <div class="member-link">
-<a name="clone" href="#clone"><tt><b>clone</b>([options])</tt></a>
+<a name="addeffect-effect" href="#addeffect-effect"><tt><b>addEffect</b>(effect)</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Clones the item within the same project and places the copy above the item.</p>
-    <ul class="member-list">
-<h4>Options:</h4>
-<li><tt>insert: undefined</tt> &mdash; specifies whether the copy should be  inserted into the scene graph. When set to <code>true</code>, it is inserted  above the original &mdash;&nbsp;default: <tt>true</tt></li>
-<li><tt>deep: undefined</tt> &mdash; specifies whether the item&rsquo;s children should also be  cloned &mdash;&nbsp;default: <tt>true</tt></li>
-</ul>
+	<p>Adds an effect at the end of the item&rsquo;s effects.</p>
+    
 	
 <ul class="member-list">
 	<h4>Parameters:</h4>
 	
 	<li>
-<tt>options:</tt> 
+<tt>effect:</tt> 
 <tt>Object</tt>
+&mdash;&nbsp;the plain object describing the effect
 
-&mdash;&nbsp;optional, default: <tt>{ insert: true, deep: true }</tt>
 </li>
 	
 </ul>
@@ -6224,7 +6522,7 @@ circle.set({
 		<h4>Returns:</h4>
 		
 			<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+<tt><a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a></tt>&nbsp;&mdash;&nbsp;the added instance
 </li>
 
 		
@@ -6233,15 +6531,339 @@ circle.set({
 
 
 	
-	<h4>Example:<span class="description">Cloning items:</span></h4>
-
+	
+</div>
+</div>
+</div>
+
+	
+<div id="inserteffect-index-effect" class="member">
+<div class="member-link">
+<a name="inserteffect-index-effect" href="#inserteffect-index-effect"><tt><b>insertEffect</b>(index, effect)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Inserts an effect into the item&rsquo;s effects at the given index.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index at which to insert the effect
+
+</li>
+	
+	<li>
+<tt>effect:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the plain object describing the effect
+
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a></tt>&nbsp;&mdash;&nbsp;the inserted instance
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="inserteffects-index-effects" class="member">
+<div class="member-link">
+<a name="inserteffects-index-effects" href="#inserteffects-index-effects"><tt><b>insertEffects</b>(index, effects)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Inserts effects into the item&rsquo;s effects at the given index.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index at which to insert the effects
+
+</li>
+	
+	<li>
+<tt>effects:</tt> 
+Array of <tt>Object</tt> objects
+&mdash;&nbsp;the plain objects describing the effects
+
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt>Array of <a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the inserted instances
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removeeffect-index" class="member">
+<div class="member-link">
+<a name="removeeffect-index" href="#removeeffect-index"><tt><b>removeEffect</b>(index)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Removes the effect at the given index from the item&rsquo;s effects.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index of the effect to remove
+
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a></tt>&nbsp;&mdash;&nbsp;the removed instance, or <code>null</code>
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removeeffects" class="member">
+<div class="member-link">
+<a name="removeeffects" href="#removeeffects"><tt><b>removeEffects</b>([start[, end]])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Removes the effects from the start index to the end index from the item&rsquo;s effects, or all of them.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>start:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index of the first effect to remove
+&mdash;&nbsp;optional, default: <tt>0</tt>
+</li>
+	
+	<li>
+<tt>end:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index after the last one
+&mdash;&nbsp;optional, default: <tt>effects.length</tt>
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt>Array of <a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the removed instances
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="geteffectoutput" class="member">
+<div class="member-link">
+<a name="geteffectoutput" href="#geteffectoutput"><tt><b>getEffectOutput</b>()</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Returns what the item&rsquo;s visible effects make of it, in the item&rsquo;s own coordinates, outside of the scene graph, or <code>null</code> if it has none. It is kept until the item, its content, its effects or the registered effects change, so changing it isn&rsquo;t tracked.</p>
+    
+	
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a>⟋<tt>null</tt></tt>&nbsp;&mdash;&nbsp;the output of the effects
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="set-props" class="member">
+<div class="member-link">
+<a name="set-props" href="#set-props"><tt><b>set</b>(props)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Sets the properties of the passed object literal on this item to the values defined in the object literal, if the item has property of the given name (or a setter defined for it).</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>props:</tt> 
+<tt>Object</tt>
+
+
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the item itself
+</li>
+
+		
+	</ul>
+
+
+
+	
+	<h4>Example:<span class="description">Setting properties through an object literal</span></h4>
+
 <div class="paperscript split">
 
 <div class="buttons">
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-84">
+<script type="text/paperscript" canvas="canvas-87">
+var circle = new Path.Circle({
+    center: [80, 50],
+    radius: 35
+});
+
+circle.set({
+    strokeColor: 'red',
+    strokeWidth: 10,
+    fillColor: 'black',
+    selected: true
+});
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-87"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="clone" class="member">
+<div class="member-link">
+<a name="clone" href="#clone"><tt><b>clone</b>([options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the item.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>insert: undefined</tt> &mdash; specifies whether the copy should be  inserted into the scene graph. When set to <code>true</code>, it is inserted  above the original &mdash;&nbsp;default: <tt>true</tt></li>
+<li><tt>deep: undefined</tt> &mdash; specifies whether the item&rsquo;s children should also be  cloned &mdash;&nbsp;default: <tt>true</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ insert: true, deep: true }</tt>
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+
+		
+	</ul>
+
+
+
+	
+	<h4>Example:<span class="description">Cloning items:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-88">
 var circle = new Path.Circle({
     center: [50, 50],
     radius: 10,
@@ -6256,7 +6878,7 @@ for (var i = 0; i < 20; i++) {
     copy.position.x += i * copy.bounds.width;
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-84"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-88"></canvas></div>
 </div>
 
 
@@ -6382,7 +7004,7 @@ for (var i = 0; i < 20; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-85">
+<script type="text/paperscript" canvas="canvas-89">
 var circle = new Path.Circle({
     center: [50, 50],
     radius: 5,
@@ -6399,7 +7021,7 @@ raster.position.x += 100;
 circle.scale(5);
 raster.scale(5);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-85"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-89"></canvas></div>
 </div>
 
 
@@ -6453,7 +7075,7 @@ raster.scale(5);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-86">
+<script type="text/paperscript" canvas="canvas-90">
 var path = new Path.Star({
     center: [50, 50],
     points: 12,
@@ -6474,7 +7096,7 @@ function onMouseDown(event) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-86"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-90"></canvas></div>
 </div>
 
 
@@ -6992,11 +7614,17 @@ function onMouseDown(event) {
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Exports the item with its content and child items as an SVG DOM.</p>
+	<p>Exports the item with its content and child items as an SVG DOM. With <code>options.bounds</code> or <code>options.matrix</code>, the item is wrapped in an <code>&lt;svg&gt;</code> element sized to the bounds, as <a href="../classes/Project.html#exportsvg-options"><tt>project.exportSVG(options)</tt></a> does.</p>
     <ul class="member-list">
 <h4>Options:</h4>
-<li><tt>options.bounds: <tt>String</tt>⟋<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt> &mdash; the bounds of the area  to export, either as a string (<tt>&lsquo;view&rsquo;</tt>, <tt>content&rsquo;</tt>), or a  <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a> object: <code>&#39;view&#39;</code> uses the view bounds,  <code>&#39;content&#39;</code> uses the stroke bounds of all content &mdash;&nbsp;default: <tt>&lsquo;view&rsquo;</tt></li>
-<li><tt>options.matrix: <a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt> &mdash; the matrix with which  to transform the exported content: If <code>options.bounds</code> is set to  <code>&#39;view&#39;</code>, <code>paper.view.matrix</code> is used, for all other settings of  <code>options.bounds</code> the identity matrix is used. &mdash;&nbsp;default: <tt>paper.view.matrix</tt></li>
+<li>[options.bounds] {String|Rectangle} the bounds of the area to
+    export, either as a string ({@values 'view', content'}), or a
+    {@link Rectangle} object: `'view'` uses the view bounds,
+    `'content'` uses the stroke bounds of the item</li>
+<li>[options.matrix] {Matrix} the matrix with which to transform the
+    exported content: If `options.bounds` is set to `'view'`,
+    `paper.view.matrix` is used, for all other settings of
+    `options.bounds` the identity matrix is used.</li>
 <li><tt>options.asString: <tt>Boolean</tt></tt> &mdash; whether a SVG node or a  <code>String</code> is to be returned &mdash;&nbsp;default: <tt>false</tt></li>
 <li><tt>options.precision: <tt>Number</tt></tt> &mdash; the amount of fractional digits in  numbers used in SVG data &mdash;&nbsp;default: <tt>5</tt></li>
 <li><tt>options.matchShapes: <tt>Boolean</tt></tt> &mdash; whether path items should  tried to be converted to SVG shape items (rect, circle, ellipse,  line, polyline, polygon), if their geometries match &mdash;&nbsp;default: <tt>false</tt></li>
@@ -7004,6 +7632,12 @@ function onMouseDown(event) {
 <li><tt>options.reuseImages: <tt>Boolean</tt></tt> &mdash; whether raster images with  the same content should only be exported once into the <code>&lt;defs&gt;</code>  element, and placed through <code>&lt;use&gt;</code> elements referencing it &mdash;&nbsp;default: <tt>false</tt></li>
 <li><tt>options.idPrefix: <tt>String</tt></tt> &mdash; a prefix for the ids generated  for definitions such as gradients, clip paths and symbols, to keep  them unique when several exported SVGs are placed in one document &mdash;&nbsp;default: <tt>&rsquo;&rsquo;</tt></li>
 <li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> &mdash; wether to only include  style attributes in the SVG output that differ from their parents,  or to always include them (much faster but leading to redundancies). &mdash;&nbsp;default: <tt>true</tt></li>
+<li>[options.processNode] {Function} the function to process the
+    SVG node made for each exported item, receiving an object with the
+    `item` and its `node`: It can change the node, e.g. to add attributes
+    that Paper.js doesn't export, or return a node to replace it with. It
+    is called before the item's name, style, visibility and data are set
+    on the node, which replace attributes of the same names.</li>
 </ul>
 	
 <ul class="member-list">
@@ -7046,6 +7680,7 @@ function onMouseDown(event) {
 <div class="member-text">
 	<p>Converts the provided SVG content into Paper.js items and adds them to the this item&rsquo;s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
 <p><code>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
+<p>The layers in SVG content that Paper.js exported come back as <a href="../classes/Layer.html"><tt>Layer</tt></a> items inside the imported group. To make the layers of a project&rsquo;s SVG the layers of a project again, add them to it with <code>item.children.slice().forEach(project.addLayer, project)</code>.</p>
 <p>URLs are fetched as they are, so validate URLs that come from untrusted sources first, especially on servers, where they could reach internal addresses.</p>
     <ul class="member-list">
 <h4>Options:</h4>
@@ -7057,6 +7692,13 @@ function onMouseDown(event) {
 <li><tt>options.onError: <tt>Function</tt></tt> &mdash; the callback function to call if an  error occurs during loading. Only required when loading from external  resources.</li>
 <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the imported items should  be added to the item that <code>importSVG()</code> is called on &mdash;&nbsp;default: <tt>true</tt></li>
 <li><tt>options.applyMatrix: <tt>Boolean</tt></tt> &mdash; whether the imported items should have their transformation  matrices applied to their contents or not &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.applyMatrix</tt></li>
+<li>[options.processItem] {Function} the function to process the
+    item made for each imported SVG element, receiving an object with
+    the `item` and its `node`: It can read attributes that Paper.js
+    doesn't import, or return an item to replace it with. It is called
+    after the element's attributes and data are applied to the item, so
+    it can extend `item.data`. A replacement item doesn't receive them:
+    copy them over from `item` as needed.</li>
 </ul>
 	
 <ul class="member-list">
@@ -8295,7 +8937,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-87">
+<script type="text/paperscript" canvas="canvas-91">
 // Create a rectangle shaped path with its top left
 // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
 var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
@@ -8304,7 +8946,7 @@ path.fillColor = 'black';
 // Rotate the path by 30 degrees:
 path.rotate(30);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-87"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-91"></canvas></div>
 </div>
 
 
@@ -8316,7 +8958,7 @@ path.rotate(30);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-88">
+<script type="text/paperscript" canvas="canvas-92">
 // Create a rectangle shaped path with its top left
 // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
 var topLeft = new Point(175, 50);
@@ -8338,7 +8980,7 @@ function onFrame(event) {
     path.rotate(3, view.center);
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-88"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-92"></canvas></div>
 </div>
 
 
@@ -8387,7 +9029,7 @@ function onFrame(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-89">
+<script type="text/paperscript" canvas="canvas-93">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -8399,7 +9041,7 @@ var circle = new Path.Circle({
 // Scale the path by 150% from its center point
 circle.scale(1.5);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-89"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-93"></canvas></div>
 </div>
 
 
@@ -8411,7 +9053,7 @@ circle.scale(1.5);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-90">
+<script type="text/paperscript" canvas="canvas-94">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -8423,7 +9065,7 @@ var circle = new Path.Circle({
 // Scale the path 150% from its bottom left corner
 circle.scale(1.5, circle.bounds.bottomLeft);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-90"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-94"></canvas></div>
 </div>
 
 
@@ -8479,7 +9121,7 @@ circle.scale(1.5, circle.bounds.bottomLeft);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-91">
+<script type="text/paperscript" canvas="canvas-95">
 // Create a circle shaped path at { x: 100, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -8491,7 +9133,7 @@ var circle = new Path.Circle({
 // Scale the path horizontally by 300%
 circle.scale(3, 1);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-91"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-95"></canvas></div>
 </div>
 
 
@@ -8929,7 +9571,7 @@ circle.scale(3, 1);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-92">
+<script type="text/paperscript" canvas="canvas-96">
 // Create a rectangle shaped path with its top left corner
 // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
 var path = new Path.Rectangle({
@@ -8950,7 +9592,7 @@ var circlePath = new Path.Circle({
 // the rectangular path:
 circlePath.fitBounds(path.bounds);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-92"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-96"></canvas></div>
 </div>
 
 
@@ -8962,7 +9604,7 @@ circlePath.fitBounds(path.bounds);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-93">
+<script type="text/paperscript" canvas="canvas-97">
 // Create a rectangle shaped path with its top left corner
 // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
 var path = new Path.Rectangle({
@@ -8983,7 +9625,7 @@ var circlePath = new Path.Circle({
 // the rectangular path:
 circlePath.fitBounds(path.bounds, 'cover');
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-93"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-97"></canvas></div>
 </div>
 
 
@@ -8995,7 +9637,7 @@ circlePath.fitBounds(path.bounds, 'cover');
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-94">
+<script type="text/paperscript" canvas="canvas-98">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 30,
@@ -9005,7 +9647,7 @@ var path = new Path.Circle({
 // Fit the path to the bounding rectangle of the view:
 path.fitBounds(view.bounds);
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-94"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-98"></canvas></div>
 </div>
 
 
@@ -9031,7 +9673,7 @@ path.fitBounds(view.bounds);
 	<li>
 <tt>type:</tt> 
 <tt>String</tt>
-&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>
+&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>, <tt>&lsquo;draw&rsquo;</tt>, <tt>&lsquo;drawselection&rsquo;</tt>
 
 </li>
 	
@@ -9066,7 +9708,7 @@ path.fitBounds(view.bounds);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-95">
+<script type="text/paperscript" canvas="canvas-99">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -9084,7 +9726,7 @@ path.on('mouseleave', function() {
     this.fillColor = 'black';
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-95"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-99"></canvas></div>
 </div>
 
 
@@ -9108,7 +9750,7 @@ path.on('mouseleave', function() {
 	<li>
 <tt>object:</tt> 
 <tt>Object</tt>
-&mdash;&nbsp;an object containing one or more of the following  properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>
+&mdash;&nbsp;an object containing one or more of the following  properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>, <tt>draw</tt>, <tt>drawselection</tt>
 
 </li>
 	
@@ -9136,7 +9778,7 @@ path.on('mouseleave', function() {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-96">
+<script type="text/paperscript" canvas="canvas-100">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -9154,7 +9796,7 @@ path.on({
     }
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-96"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-100"></canvas></div>
 </div>
 
 
@@ -9166,7 +9808,7 @@ path.on({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-97">
+<script type="text/paperscript" canvas="canvas-101">
 var pathHandlers = {
     mouseenter: function(event) {
         this.fillColor = 'red';
@@ -9189,7 +9831,7 @@ function onMouseDown(event) {
     path.on(pathHandlers);
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-97"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-101"></canvas></div>
 </div>
 
 
@@ -9213,7 +9855,7 @@ function onMouseDown(event) {
 	<li>
 <tt>type:</tt> 
 <tt>String</tt>
-&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>
+&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>, <tt>&lsquo;draw&rsquo;</tt>, <tt>&lsquo;drawselection&rsquo;</tt>
 
 </li>
 	
@@ -9261,7 +9903,7 @@ function onMouseDown(event) {
 	<li>
 <tt>object:</tt> 
 <tt>Object</tt>
-&mdash;&nbsp;an object containing one or more of the following  properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>
+&mdash;&nbsp;an object containing one or more of the following  properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>, <tt>draw</tt>, <tt>drawselection</tt>
 
 </li>
 	
@@ -9302,7 +9944,7 @@ function onMouseDown(event) {
 	<li>
 <tt>type:</tt> 
 <tt>String</tt>
-&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>
+&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>, <tt>&lsquo;draw&rsquo;</tt>, <tt>&lsquo;drawselection&rsquo;</tt>
 
 </li>
 	
@@ -9350,7 +9992,7 @@ function onMouseDown(event) {
 	<li>
 <tt>type:</tt> 
 <tt>String</tt>
-&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>
+&mdash;&nbsp;the type of event: <tt>&lsquo;frame&rsquo;</tt>, <tt>mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;click&rsquo;</tt>, <tt>&lsquo;doubleclick&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;mouseenter&rsquo;</tt>, <tt>&lsquo;mouseleave&rsquo;</tt>, <tt>&lsquo;draw&rsquo;</tt>, <tt>&lsquo;drawselection&rsquo;</tt>
 
 </li>
 	
@@ -9417,7 +10059,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-98">
+<script type="text/paperscript" canvas="canvas-102">
 function onMouseDrag(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -9434,7 +10076,7 @@ function onMouseDrag(event) {
     });
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-98"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-102"></canvas></div>
 </div>
 
 
@@ -9464,7 +10106,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-99">
+<script type="text/paperscript" canvas="canvas-103">
 function onMouseMove(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -9478,7 +10120,7 @@ function onMouseMove(event) {
     path.removeOnMove();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-99"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-103"></canvas></div>
 </div>
 
 
@@ -9508,7 +10150,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-100">
+<script type="text/paperscript" canvas="canvas-104">
 function onMouseDown(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -9522,7 +10164,7 @@ function onMouseDown(event) {
     path.removeOnDown();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-100"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-104"></canvas></div>
 </div>
 
 
@@ -9552,7 +10194,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-101">
+<script type="text/paperscript" canvas="canvas-105">
 function onMouseDrag(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -9566,7 +10208,7 @@ function onMouseDrag(event) {
     path.removeOnDrag();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-101"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-105"></canvas></div>
 </div>
 
 
@@ -9596,7 +10238,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-102">
+<script type="text/paperscript" canvas="canvas-106">
 function onMouseDown(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -9610,7 +10252,7 @@ function onMouseDown(event) {
     path.removeOnUp();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-102"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-106"></canvas></div>
 </div>
 
 
@@ -9683,7 +10325,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-103">
+<script type="text/paperscript" canvas="canvas-107">
 var path = new Path.Circle({
     radius: view.bounds.height * 0.4,
     center: view.center
@@ -9694,7 +10336,7 @@ path.tween(
     3000
 );
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-103"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-107"></canvas></div>
 </div>
 
 
@@ -9706,7 +10348,7 @@ path.tween(
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-104">
+<script type="text/paperscript" canvas="canvas-108">
 var path = new Shape.Rectangle({
     fillColor: 'red',
     center: [50, view.center.y],
@@ -9721,7 +10363,7 @@ path.tween({
     duration: 2000
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-104"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-108"></canvas></div>
 </div>
 
 
@@ -9787,7 +10429,7 @@ path.tween({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-105">
+<script type="text/paperscript" canvas="canvas-109">
 var path = new Path.Rectangle({
     size: [100, 100],
     position: view.center,
@@ -9801,7 +10443,7 @@ path.tween({
     'segments[2].point.x': '-= 50'
 }, 3000);
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-105"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-109"></canvas></div>
 </div>
 
 
@@ -9860,7 +10502,7 @@ path.tween({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-106">
+<script type="text/paperscript" canvas="canvas-110">
 var path = new Path.Circle({
     fillColor: 'blue',
     radius: view.bounds.height * 0.4,
@@ -9876,7 +10518,7 @@ path.tween(2000).onUpdate = function(event) {
     path.interpolate(pathFrom, pathTo, event.factor)
 };
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-106"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-110"></canvas></div>
 </div>
 
 
@@ -9997,7 +10639,7 @@ path.tween(2000).onUpdate = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-107">
+<script type="text/paperscript" canvas="canvas-111">
 var path = new Path.Circle({
     fillColor: 'blue',
     radius: view.bounds.height * 0.4,
@@ -10005,7 +10647,7 @@ var path = new Path.Circle({
 });
 path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-107"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-111"></canvas></div>
 </div>
 
 
@@ -10171,12 +10813,12 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-108">
+<script type="text/paperscript" canvas="canvas-112">
 var result = new Path.RegularPolygon([50, 50], 3, 40)
     .unite(new Path.Circle([50, 50], 25));
 result.fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-108"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-112"></canvas></div>
 </div>
 
 
@@ -10188,7 +10830,7 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-109">
+<script type="text/paperscript" canvas="canvas-113">
 var circles = [];
 for (var i = 0; i < 6; i++) {
     circles.push(new Path.Circle([30 + i * 20, 50], 20));
@@ -10196,7 +10838,7 @@ for (var i = 0; i < 6; i++) {
 var result = circles[0].unite(circles.slice(1));
 result.fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-109"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-113"></canvas></div>
 </div>
 
 
@@ -10259,12 +10901,12 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-110">
+<script type="text/paperscript" canvas="canvas-114">
 var result = new Path.RegularPolygon([50, 50], 3, 40)
     .intersect(new Path.Circle([50, 50], 25));
 result.fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-110"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-114"></canvas></div>
 </div>
 
 
@@ -10299,7 +10941,245 @@ result.fillColor = 'red';
 	<li>
 <tt>options:</tt> 
 <tt>Object</tt>
-&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
+</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-115">
+var result = new Path.RegularPolygon([50, 50], 3, 40)
+    .subtract(new Path.Circle([50, 50], 25));
+result.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-115"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="exclude-path" class="member">
+<div class="member-link">
+<a name="exclude-path" href="#exclude-path"><tt><b>exclude</b>(path[, options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Excludes the intersection of the geometry of the specified path with this path&rsquo;s geometry and returns the result as a new path item. With an array of paths, the result covers the areas inside an odd number of the paths, this one included. Each path keeps its own fill rule.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above all paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>path:</tt> 
+<a href="../classes/PathItem.html"><tt>PathItem</tt></a>⟋Array of <a href="../classes/PathItem.html"><tt>PathItem</tt></a> objects
+&mdash;&nbsp;the path or paths to exclude the  intersection of
+
+</li>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
+</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-116">
+var result = new Path.RegularPolygon([50, 50], 3, 40)
+    .exclude(new Path.Circle([50, 50], 25));
+result.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-116"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="divide-path" class="member">
+<div class="member-link">
+<a name="divide-path" href="#divide-path"><tt><b>divide</b>(path[, options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Splits the geometry of this path along the geometry of the specified path returns the result as a new group item. This is equivalent to calling <a href="../classes/PathItem.html#subtract-path"><tt>subtract(path)</tt></a> and <a href="../classes/PathItem.html#intersect-path"><tt>intersect(path)</tt></a> and putting the results into a new group.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above both paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
+<li><tt>options.trace: <tt>Boolean</tt></tt> &mdash; whether the tracing method is  used, treating both paths as areas when determining which parts  of the paths are to be kept in the result, or whether the first  path is only to be split at intersections. &mdash;&nbsp;default: <tt>true</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>path:</tt> 
+<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
+&mdash;&nbsp;the path to divide by
+
+</li>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reorient" class="member">
+<div class="member-link">
+<a name="reorient" href="#reorient"><tt><b>reorient</b>([nonZero[, clockwise]])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Fixes the orientation of the sub-paths of a compound-path, assuming that non of its sub-paths intersect, by reorienting them so that they are of different winding direction than their containing paths, except for disjoint sub-paths, i.e. islands, which are oriented so that they have the same winding direction as the the biggest path.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>nonZero:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;controls if the non-zero fill-rule  is to be applied, by counting the winding of each nested path and  discarding sub-paths that do not contribute to the final result
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+	
+	<li>
+<tt>clockwise:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;if provided, the orientation of the root  paths will be set to the orientation specified by <code>clockwise</code>,  otherwise the orientation of the largest root child is used.
+&mdash;&nbsp;optional
+</li>
+	
+</ul>
+
+	
+	<ul class="member-list">
+		<h4>Returns:</h4>
+		
+			<li>
+<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;a reference to the item itself, reoriented
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Offsetting and Outlining</h3>
+
+<div id="offset-distance" class="member">
+<div class="member-link">
+<a name="offset-distance" href="#offset-distance"><tt><b>offset</b>(distance[, options])</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Offsets the path item by the given distance and returns the result as a new path item. Closed paths and compound paths grow by positive distances and shrink by negative ones, open paths are offset along their normals for positive distances, and against them for negative ones. As with the boolean operations, the path item&rsquo;s matrix is applied first.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>options.join: <tt>String</tt></tt> &mdash; the shape of the corners  that the offset adds where the path turns away from it:  <tt>&lsquo;miter&rsquo;</tt>, <tt>&lsquo;round&rsquo;</tt>, <tt>&lsquo;bevel&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;miter&rsquo;</tt></li>
+<li><tt>options.miterLimit: <tt>Number</tt></tt> &mdash; the limit of miter corners,  see <a href="../classes/Style.html#miterlimit"><tt>style.miterLimit</tt></a> &mdash;&nbsp;default: <tt>10</tt></li>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above this path &mdash;&nbsp;default: <tt>true</tt></li>
+</ul>
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>distance:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the distance to offset the path item by
+
+</li>
+	
+	<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;the offset options
 &mdash;&nbsp;optional
 </li>
 	
@@ -10327,12 +11207,13 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-111">
-var result = new Path.RegularPolygon([50, 50], 3, 40)
-    .subtract(new Path.Circle([50, 50], 25));
-result.fillColor = 'red';
+<script type="text/paperscript" canvas="canvas-117">
+var path = new Path.Star([50, 50], 5, 20, 40);
+path.strokeColor = 'black';
+var result = path.offset(10, { join: 'round' });
+result.strokeColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-111"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-117"></canvas></div>
 </div>
 
 
@@ -10341,32 +11222,30 @@ result.fillColor = 'red';
 </div>
 
 	
-<div id="exclude-path" class="member">
+<div id="outline" class="member">
 <div class="member-link">
-<a name="exclude-path" href="#exclude-path"><tt><b>exclude</b>(path[, options])</tt></a>
+<a name="outline" href="#outline"><tt><b>outline</b>([options])</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Excludes the intersection of the geometry of the specified path with this path&rsquo;s geometry and returns the result as a new path item. With an array of paths, the result covers the areas inside an odd number of the paths, this one included. Each path keeps its own fill rule.</p>
+	<p>Outlines the stroke of the path item, and returns the area that it covers as a new path item, filled with the stroke&rsquo;s color. As with the boolean operations, the path item&rsquo;s matrix is applied first. Dashed strokes are outlined as their dashes, each with the stroke&rsquo;s caps, as the canvas draws them, see <a href="../classes/PathItem.html#dash-options"><tt>dash(options)</tt></a>.</p>
+<p>Paths with a <a href="../classes/Path.html#strokeprofile"><tt>path.strokeProfile</tt></a> are outlined as the area that its pens sweep. Their round joins and caps are the pens themselves, and their other joins and caps connect the points where the pens touch the sides of the stroke. Steps in the profile end the parts of the stroke straight across, as butt caps do.</p>
     <ul class="member-list">
 <h4>Options:</h4>
-<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above all paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
+<li><tt>options.width: <tt>Number</tt></tt> &mdash; the width of the  stroke &mdash;&nbsp;default: <tt>this.strokeWidth</tt></li>
+<li><tt>options.join: <tt>String</tt></tt> &mdash; the shape of the  stroke&rsquo;s corners: <tt>&lsquo;miter&rsquo;</tt>, <tt>&lsquo;round&rsquo;</tt>, <tt>&lsquo;bevel&rsquo;</tt> &mdash;&nbsp;default: <tt>this.strokeJoin</tt></li>
+<li><tt>options.cap: <tt>String</tt></tt> &mdash; the shape of the  stroke&rsquo;s ends: <tt>&lsquo;round&rsquo;</tt>, <tt>&lsquo;square&rsquo;</tt>, <tt>&lsquo;butt&rsquo;</tt> &mdash;&nbsp;default: <tt>this.strokeCap</tt></li>
+<li><tt>options.miterLimit: <tt>Number</tt></tt> &mdash; the limit of  miter corners, see <a href="../classes/Style.html#miterlimit"><tt>style.miterLimit</tt></a> &mdash;&nbsp;default: <tt>this.miterLimit</tt></li>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above this path &mdash;&nbsp;default: <tt>true</tt></li>
 </ul>
 	
 <ul class="member-list">
 	<h4>Parameters:</h4>
 	
-	<li>
-<tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>⟋Array of <a href="../classes/PathItem.html"><tt>PathItem</tt></a> objects
-&mdash;&nbsp;the path or paths to exclude the  intersection of
-
-</li>
-	
 	<li>
 <tt>options:</tt> 
 <tt>Object</tt>
-&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;the outline options
 &mdash;&nbsp;optional
 </li>
 	
@@ -10394,12 +11273,17 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-112">
-var result = new Path.RegularPolygon([50, 50], 3, 40)
-    .exclude(new Path.Circle([50, 50], 25));
-result.fillColor = 'red';
+<script type="text/paperscript" canvas="canvas-118">
+var path = new Path.Arc([20, 70], [50, 20], [80, 70]);
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+path.strokeCap = 'round';
+var result = path.outline();
+result.strokeColor = 'red';
+result.strokeWidth = 1;
+path.remove();
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-112"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-118"></canvas></div>
 </div>
 
 
@@ -10408,33 +11292,27 @@ result.fillColor = 'red';
 </div>
 
 	
-<div id="divide-path" class="member">
+<div id="dash" class="member">
 <div class="member-link">
-<a name="divide-path" href="#divide-path"><tt><b>divide</b>(path[, options])</tt></a>
+<a name="dash" href="#dash"><tt><b>dash</b>([options])</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Splits the geometry of this path along the geometry of the specified path returns the result as a new group item. This is equivalent to calling <a href="../classes/PathItem.html#subtract-path"><tt>subtract(path)</tt></a> and <a href="../classes/PathItem.html#intersect-path"><tt>intersect(path)</tt></a> and putting the results into a new group.</p>
+	<p>Cuts the stroke of the path item into its dashes, as the canvas draws them with the <a href="../classes/Style.html#dasharray"><tt>style.dashArray</tt></a> and <a href="../classes/Style.html#dashoffset"><tt>style.dashOffset</tt></a> of the path item or those of the options, and returns them as a new group of open paths with the path item&rsquo;s style, without its dash pattern. The pattern starts over on each path of a compound path, and the dashes keep the parts of the paths&rsquo; stroke profiles. As with the boolean operations, the path item&rsquo;s matrix is applied first.</p>
     <ul class="member-list">
 <h4>Options:</h4>
-<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting item  should be inserted back into the scene graph, above both paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
-<li><tt>options.trace: <tt>Boolean</tt></tt> &mdash; whether the tracing method is  used, treating both paths as areas when determining which parts  of the paths are to be kept in the result, or whether the first  path is only to be split at intersections. &mdash;&nbsp;default: <tt>true</tt></li>
+<li><tt>options.dashArray: Array of <tt>Numbers</tt></tt> &mdash; the lengths of  the dashes and the gaps between them &mdash;&nbsp;default: <tt>this.dashArray</tt></li>
+<li><tt>options.dashOffset: <tt>Number</tt></tt> &mdash; the offset  into the pattern at which the dashes start &mdash;&nbsp;default: <tt>this.dashOffset</tt></li>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the resulting group  should be inserted back into the scene graph, above this path  item &mdash;&nbsp;default: <tt>true</tt></li>
 </ul>
 	
 <ul class="member-list">
 	<h4>Parameters:</h4>
 	
-	<li>
-<tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
-&mdash;&nbsp;the path to divide by
-
-</li>
-	
 	<li>
 <tt>options:</tt> 
 <tt>Object</tt>
-&mdash;&nbsp;the boolean operation options
+&mdash;&nbsp;the dash options
 &mdash;&nbsp;optional
 </li>
 	
@@ -10445,7 +11323,7 @@ result.fillColor = 'red';
 		<h4>Returns:</h4>
 		
 			<li>
-<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
+<tt><a href="../classes/Group.html"><tt>Group</tt></a></tt>&nbsp;&mdash;&nbsp;the dashes, as a new group of paths
 </li>
 
 		
@@ -10454,55 +11332,34 @@ result.fillColor = 'red';
 
 
 	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reorient" class="member">
-<div class="member-link">
-<a name="reorient" href="#reorient"><tt><b>reorient</b>([nonZero[, clockwise]])</tt></a>
-</div>
-<div class="member-description hidden">
-<div class="member-text">
-	<p>Fixes the orientation of the sub-paths of a compound-path, assuming that non of its sub-paths intersect, by reorienting them so that they are of different winding direction than their containing paths, except for disjoint sub-paths, i.e. islands, which are oriented so that they have the same winding direction as the the biggest path.</p>
-    
-	
-<ul class="member-list">
-	<h4>Parameters:</h4>
-	
-	<li>
-<tt>nonZero:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;controls if the non-zero fill-rule  is to be applied, by counting the winding of each nested path and  discarding sub-paths that do not contribute to the final result
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-	
-	<li>
-<tt>clockwise:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;if provided, the orientation of the root  paths will be set to the orientation specified by <code>clockwise</code>,  otherwise the orientation of the largest root child is used.
-&mdash;&nbsp;optional
-</li>
-	
-</ul>
+	<h4>Example:</h4>
 
-	
-	<ul class="member-list">
-		<h4>Returns:</h4>
-		
-			<li>
-<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;a reference to the item itself, reoriented
-</li>
+<div class="paperscript split">
 
-		
-	</ul>
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
 
+<script type="text/paperscript" canvas="canvas-119">
+var path = new Path.Circle({
+    center: [80, 50],
+    radius: 35,
+    strokeColor: 'black',
+    strokeWidth: 4,
+    dashArray: [12, 6]
+});
+// Turn every other dash red:
+var dashes = path.dash();
+dashes.children.forEach(function(dash, i) {
+    if (i % 2)
+        dash.strokeColor = 'red';
+});
+path.remove();
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-119"></canvas></div>
+</div>
 
 
-	
-	
 </div>
 </div>
 </div>
@@ -10567,7 +11424,7 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-113">
+<script type="text/paperscript" canvas="canvas-120">
 var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
 path.strokeColor = 'black';
 
@@ -10590,7 +11447,7 @@ function onFrame(event) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-113"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-120"></canvas></div>
 </div>
 
 
@@ -10731,7 +11588,7 @@ function onFrame(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-114">
+<script type="text/paperscript" canvas="canvas-121">
 var star = new Path.Star({
     center: view.center,
     points: 10,
@@ -10755,7 +11612,7 @@ function onMouseMove(event) {
     circle.position = nearestPoint;
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-114"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-121"></canvas></div>
 </div>
 
 
@@ -10818,7 +11675,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-115">
+<script type="text/paperscript" canvas="canvas-122">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var path = new Path.Circle({
@@ -10836,7 +11693,7 @@ copy.position.x += 150;
 // Flatten the copied path, with a maximum error of 4 points:
 copy.flatten(4);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-115"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-122"></canvas></div>
 </div>
 
 
@@ -10914,7 +11771,7 @@ copy.flatten(4);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-116">
+<script type="text/paperscript" canvas="canvas-123">
 // Create a rectangular path with its top-left point at
 // {x: 30, y: 25} and a size of {width: 50, height: 50}:
 var path = new Path.Rectangle({
@@ -10933,7 +11790,7 @@ copy.position.x += 100;
 // Smooth the segments of the copy:
 copy.smooth({ type: 'continuous' });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-116"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-123"></canvas></div>
 </div>
 
 
@@ -10945,7 +11802,7 @@ copy.smooth({ type: 'continuous' });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-117">
+<script type="text/paperscript" canvas="canvas-124">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -10970,7 +11827,7 @@ copy.fullySelected = true;
 // Smooth the path using centripetal Catmull-Rom splines:
 copy.smooth({ type: 'catmull-rom', factor: 0.5 });
 </script>
-<div class="canvas"><canvas width="516" height="220" id="canvas-117"></canvas></div>
+<div class="canvas"><canvas width="516" height="220" id="canvas-124"></canvas></div>
 </div>
 
 
@@ -10982,7 +11839,7 @@ copy.smooth({ type: 'catmull-rom', factor: 0.5 });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-118">
+<script type="text/paperscript" canvas="canvas-125">
 // Create 5 rectangles, next to each other:
 var paths = [];
 for (var i = 0; i < 5; i++) {
@@ -11012,7 +11869,7 @@ paths[3].smooth({ type: 'continuous', from: 0, to: 2 });
 // Smooth a range, using negative indices:
 paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
 </script>
-<div class="canvas"><canvas width="516" height="110" id="canvas-118"></canvas></div>
+<div class="canvas"><canvas width="516" height="110" id="canvas-125"></canvas></div>
 </div>
 
 
@@ -11023,22 +11880,28 @@ paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
 	
 <div id="simplify" class="member">
 <div class="member-link">
-<a name="simplify" href="#simplify"><tt><b>simplify</b>([tolerance])</tt></a>
+<a name="simplify" href="#simplify"><tt><b>simplify</b>([options])</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
 	<p>Fits a sequence of as few curves as possible through the path&rsquo;s anchor points, ignoring the path items&rsquo;s curve-handles, with an allowed maximum error. When called on <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, each of the nested paths is simplified. On <a href="../classes/Path.html"><tt>Path</tt></a> items, the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array is processed and replaced by the resulting sequence of fitted curves.</p>
 <p>This method can be used to process and simplify the point data received from a mouse or touch device.</p>
-    
+<p>With <code>options.from</code> and <code>options.to</code>, only the segments in that range are replaced. The fitted curves join the curves outside of the range tangentially where these have handles.</p>
+    <ul class="member-list">
+<h4>Options:</h4>
+<li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the allowed maximum error when  fitting the curves through the segment points &mdash;&nbsp;default: <tt>2.5</tt></li>
+<li><tt>options.from: <tt>Number</tt>⟋<a href="../classes/Segment.html"><tt>Segment</tt></a>⟋<a href="../classes/Curve.html"><tt>Curve</tt></a></tt> &mdash; the segment or curve at which  to start simplifying, if not the full path shall be simplified  (inclusive). This can either be a segment index, or a segment or  curve object that is part of the path. If the passed number is  negative, the index is wrapped around the end of the path.</li>
+<li><tt>options.to: <tt>Number</tt>⟋<a href="../classes/Segment.html"><tt>Segment</tt></a>⟋<a href="../classes/Curve.html"><tt>Curve</tt></a></tt> &mdash; the segment or curve up to  which to simplify (inclusive). This can either be a segment index,  or a segment or curve object that is part of the path. If the passed  number is negative, the index is wrapped around the end of the path.</li>
+</ul>
 	
 <ul class="member-list">
 	<h4>Parameters:</h4>
 	
 	<li>
-<tt>tolerance:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the allowed maximum error when fitting  the curves through the segment points
-&mdash;&nbsp;optional, default: <tt>2.5</tt>
+<tt>options:</tt> 
+<tt>Object</tt>⟋<tt>Number</tt>
+&mdash;&nbsp;the simplification options, or the  tolerance as a number
+&mdash;&nbsp;optional
 </li>
 	
 </ul>
@@ -11065,7 +11928,7 @@ paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-119">
+<script type="text/paperscript" canvas="canvas-126">
 var path;
 function onMouseDown(event) {
     // If we already made a path before, deselect it:
@@ -11095,7 +11958,7 @@ function onMouseUp(event) {
     path.selected = true;
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-119"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-126"></canvas></div>
 </div>
 
 
@@ -11294,7 +12157,7 @@ function onMouseUp(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-120">
+<script type="text/paperscript" canvas="canvas-127">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11314,7 +12177,7 @@ path.arcTo(throughPoint, toPoint);
 var circle = new Path.Circle(throughPoint, 3);
 circle.fillColor = 'red';
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-120"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-127"></canvas></div>
 </div>
 
 
@@ -11326,7 +12189,7 @@ circle.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-121">
+<script type="text/paperscript" canvas="canvas-128">
 var myPath;
 function onMouseDrag(event) {
     // If we created a path before, remove it:
@@ -11354,7 +12217,7 @@ function onMouseUp(event) {
     myPath.fillColor = 'black';
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-121"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-128"></canvas></div>
 </div>
 
 
@@ -11403,7 +12266,7 @@ function onMouseUp(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-122">
+<script type="text/paperscript" canvas="canvas-129">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11418,7 +12281,7 @@ path2.add(new Point(180, 25));
 // we pass `false` as the second argument to arcTo:
 path2.arcTo(new Point(280, 25), false);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-122"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-129"></canvas></div>
 </div>
 
 
@@ -11430,7 +12293,7 @@ path2.arcTo(new Point(280, 25), false);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-123">
+<script type="text/paperscript" canvas="canvas-130">
 var myPath;
 
 // The mouse has to move at least 20 points before
@@ -11451,7 +12314,158 @@ function onMouseDrag(event) {
     myPath.arcTo(event.point);
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-123"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-130"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arcaround-center-angle" class="member">
+<div class="member-link">
+<a name="arcaround-center-angle" href="#arcaround-center-angle"><tt><b>arcAround</b>(center, angle)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Adds an arc that sweeps the specified angle around the specified <code>center</code> point, from the position of the last segment in the path, by adding one or more segments to the path. Positive angles draw the arc in clockwise direction, negative ones in anticlockwise direction.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the center of the arc
+
+</li>
+	
+	<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the angle in degrees that the arc sweeps over
+
+</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-131">
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(30, 75));
+path.lineTo(new Point(80, 75));
+
+// Draw a half circle around (105, 75) and continue on the other side:
+path.arcAround(new Point(105, 75), 180);
+path.lineTo(new Point(180, 75));
+
+// Draw a full circle around (230, 75):
+var circle = new Path();
+circle.strokeColor = 'red';
+circle.add(new Point(250, 75));
+circle.arcAround(new Point(230, 75), 360);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-131"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arctowards-to" class="member">
+<div class="member-link">
+<a name="arctowards-to" href="#arctowards-to"><tt><b>arcTowards</b>(to)</tt></a>
+</div>
+<div class="member-description hidden">
+<div class="member-text">
+	<p>Adds an arc from the position of the last segment in the path to the specified point, by adding one or more segments to the path. The arc continues in the direction in which the path ends, without a corner.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</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-132">
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(30, 125));
+path.lineTo(new Point(80, 125));
+
+// Each arc continues smoothly from where the path ends:
+path.arcTowards(new Point(130, 75));
+path.arcTowards(new Point(230, 75));
+path.lineTo(new Point(230, 125));
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-132"></canvas></div>
+</div>
+
+
+<h4>Example:<span class="description">Interactive example. Click and drag in the view below:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-133">
+var myPath;
+
+// The mouse has to move at least 20 points before
+// the next mouse drag event is fired:
+tool.minDistance = 20;
+
+// When the user clicks, create a new path that starts
+// with a horizontal line ending at the mouse position:
+function onMouseDown(event) {
+    myPath = new Path();
+    myPath.strokeColor = 'black';
+    myPath.add(event.point - [20, 0], event.point);
+}
+
+// On each mouse drag event, continue the path smoothly
+// with an arc to the current position of the mouse:
+function onMouseDrag(event) {
+    myPath.arcTowards(event.point);
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-133"></canvas></div>
 </div>
 
 
@@ -11507,7 +12521,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-124">
+<script type="text/paperscript" canvas="canvas-134">
 var myPath;
 function onMouseMove(event) {
     // If we created a path before, remove it:
@@ -11528,7 +12542,7 @@ function onMouseMove(event) {
     myPath.selected = true;
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-124"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-134"></canvas></div>
 </div>
 
 
@@ -11713,7 +12727,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-125">
+<script type="text/paperscript" canvas="canvas-135">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11727,7 +12741,7 @@ path.lineBy(50, 0);
 // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
 path.lineBy(0, 50);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-125"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-135"></canvas></div>
 </div>
 
 
@@ -11739,7 +12753,7 @@ path.lineBy(0, 50);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-126">
+<script type="text/paperscript" canvas="canvas-136">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11765,7 +12779,7 @@ path.smooth();
 // the construction of the path:
 // path.selected = true;
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-126"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-136"></canvas></div>
 </div>
 
 
@@ -11984,7 +12998,7 @@ path.smooth();
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.15.0<br>
+Paper.js v0.17.0<br>
 Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
 <div class="content-end"></div>