paper 0.16.0 → 0.17.0

package/dist/docs/classes/Group.html

@@ -267,7 +267,7 @@ function onFrame(event) {
 <div class="member-description hidden">
 
 <div class="member-text">
-	<p>Specifies whether the group is isolated, drawn through a temporary canvas, so that the blend modes of its children only apply within it, like CSS&rsquo;s <code>isolation: isolate</code>. Without it, a compositing mode such as <code>&#39;destination-out&#39;</code> affects everything drawn below the group, also in other layers. Groups with an <a href="../classes/Item.html#opacity"><tt>item.opacity</tt></a> below 1 or a <a href="../classes/Item.html#blendmode"><tt>item.blendMode</tt></a> are isolated anyway.</p>
+	<p>Specifies whether the group is isolated, drawn through a temporary canvas, so that the blend modes of its children only apply within it, like CSS&rsquo;s <code>isolation: isolate</code>. Without it, a compositing mode such as <code>&#39;destination-out&#39;</code> affects everything drawn below the group, also in other layers. Groups with an <a href="../classes/Item.html#opacity"><tt>item.opacity</tt></a> below 1 or a <a href="../classes/Item.html#blendmode"><tt>item.blendMode</tt></a> are isolated anyway, and buffered groups always, see <a href="../classes/Group.html#buffered"><tt>buffered</tt></a>.</p>
 	
 	
 	
@@ -285,6 +285,77 @@ function onFrame(event) {
     
 	
 	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="buffered" class="member">
+<div class="member-link">
+<a name="buffered" href="#buffered"><tt><b>buffered</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>Specifies whether the group is buffered: when a view draws it, it draws its content into a canvas of its own, which it keeps, and only draws into it again when something in the group changes, or the part of it that the view shows does, e.g. after zooming or panning. Otherwise, the view only composites the buffer, with the group&rsquo;s <a href="../classes/Item.html#opacity"><tt>item.opacity</tt></a> and <a href="../classes/Item.html#blendmode"><tt>item.blendMode</tt></a>. This pays off for large groups and layers that rarely change, such as a complex background below animated items.</p>
+<p>It doesn&rsquo;t pay off when the buffer is drawn again on every frame: while the view pans or zooms on every frame, while the group itself is moved or transformed, or when an item inside it is animated. Put animated items into another group or layer instead.</p>
+<p>The buffer costs memory: it covers the part of the group that the view shows, at up to <code>width × height × 4 × pixelRatio²</code> bytes for a group that fills the whole view.</p>
+<p>Buffered groups are always <a href="../classes/Group.html#isolated"><tt>isolated</tt></a>: the blend modes of their children only apply within them, not to the items below them, also in other layers.</p>
+<p>Hit-testing, SVG export, <a href="../classes/Item.html#rasterize"><tt>item.rasterize</tt></a>() and drawing into other canvases than the view&rsquo;s don&rsquo;t use the buffer.</p>
+<p>A buffered group keeps one buffer, so inside a <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> that is placed several times, it draws into it again for each placement. Changes to any symbol definition make all buffers stale, as do forced updates through <code>view.update(true)</code>.</p>
+	
+	
+	
+		<ul class="member-list">
+			<h4>Default:</h4>
+			<li><tt>false</tt></li>
+		</ul>
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Boolean</tt>
+		</li>
+	</ul>
+    
+	
+	<h4>Example:<span class="description">Draw many circles into a buffered layer, which is drawn once, while the circle in the layer above moves on every frame:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-4">
+var background = project.activeLayer;
+background.buffered = true;
+for (var i = 0; i < 2000; i++) {
+    new Path.Circle({
+        center: Point.random() * view.size,
+        radius: 5 + Math.random() * 10,
+        fillColor: { hue: Math.random() * 360, saturation: 0.5,
+                brightness: 1 },
+        opacity: 0.5
+    });
+}
+
+var circle = new Path.Circle({
+    center: view.center,
+    radius: 20,
+    fillColor: 'black'
+});
+new Layer([circle]);
+
+function onFrame(event) {
+    circle.position.x = view.center.x + Math.sin(event.time) * 100;
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-4"></canvas></div>
+</div>
+
+
 </div>
 
 </div>
@@ -340,6 +411,91 @@ function onFrame(event) {
 <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-5">
+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-5"></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>
@@ -452,7 +608,7 @@ function onFrame(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-4">
+<script type="text/paperscript" canvas="canvas-6">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -467,7 +623,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-4"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
 </div>
 
 
@@ -505,7 +661,7 @@ group.children['example'].fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-5">
+<script type="text/paperscript" canvas="canvas-7">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 30
@@ -516,7 +672,7 @@ circle.style = {
     strokeWidth: 5
 };
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
 </div>
 
 
@@ -528,7 +684,7 @@ circle.style = {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-6">
+<script type="text/paperscript" canvas="canvas-8">
 var path = new Path.Circle({
     center: [50, 50],
     radius: 30,
@@ -543,7 +699,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-6"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
 </div>
 
 
@@ -555,7 +711,7 @@ path2.style = path.style;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-7">
+<script type="text/paperscript" canvas="canvas-9">
 var myStyle = {
     fillColor: 'red',
     strokeColor: 'blue',
@@ -574,7 +730,7 @@ var path2 = new Path.Circle({
 });
 path2.style = myStyle;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
 </div>
 
 
@@ -616,7 +772,7 @@ path2.style = myStyle;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-8">
+<script type="text/paperscript" canvas="canvas-10">
 var unlockedItem = new Path.Circle({
     center: view.center - [35, 0],
     radius: 30,
@@ -643,7 +799,7 @@ new PointText({
     justification: 'center'
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
 </div>
 
 
@@ -685,7 +841,7 @@ new PointText({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-9">
+<script type="text/paperscript" canvas="canvas-11">
 var path = new Path.Circle({
     center: [50, 50],
     radius: 20,
@@ -695,7 +851,7 @@ var path = new Path.Circle({
 // Hide the path:
 path.visible = false;
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
 </div>
 
 
@@ -743,7 +899,7 @@ path.visible = false;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-10">
+<script type="text/paperscript" canvas="canvas-12">
 // Create a white rectangle in the background
 // with the same dimensions as the view:
 var background = new Path.Rectangle(view.bounds);
@@ -764,7 +920,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-10"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
 </div>
 
 
@@ -806,7 +962,7 @@ circle2.blendMode = 'multiply';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-11">
+<script type="text/paperscript" canvas="canvas-13">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 35,
@@ -824,7 +980,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-11"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
 </div>
 
 
@@ -947,14 +1103,14 @@ circle.textWrap = { offset: 10 };</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-12">
+<script type="text/paperscript" canvas="canvas-14">
 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-12"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
 </div>
 
 
@@ -1111,7 +1267,7 @@ console.log(path.data.pets.length); // 1</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-13">
+<script type="text/paperscript" canvas="canvas-15">
 // Create a circle at position { x: 10, y: 10 }
 var circle = new Path.Circle({
     center: new Point(10, 10),
@@ -1125,7 +1281,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-13"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
 </div>
 
 
@@ -1137,7 +1293,7 @@ circle.position += new Point(100, 50);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-14">
+<script type="text/paperscript" canvas="canvas-16">
 // Create a circle at position { x: 20, y: 20 }
 var circle = new Path.Circle({
     center: new Point(20, 20),
@@ -1148,7 +1304,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-14"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
 </div>
 
 
@@ -1674,7 +1830,7 @@ console.log(group.children[0] == path); // true</code></pre>
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-15">
+<script type="text/paperscript" canvas="canvas-17">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -1687,7 +1843,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-15"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
 </div>
 
 
@@ -1699,7 +1855,7 @@ group.children[0].fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-16">
+<script type="text/paperscript" canvas="canvas-18">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -1714,7 +1870,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-16"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
 </div>
 
 
@@ -1726,7 +1882,7 @@ group.children['example'].fillColor = 'orange';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-17">
+<script type="text/paperscript" canvas="canvas-19">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -1738,7 +1894,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-17"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
 </div>
 
 
@@ -1915,7 +2071,7 @@ group.firstChild.fillColor = 'green';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-18">
+<script type="text/paperscript" canvas="canvas-20">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -1926,7 +2082,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-18"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
 </div>
 
 
@@ -1963,7 +2119,7 @@ circle.strokeColor = new Color(1, 0, 0);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-19">
+<script type="text/paperscript" canvas="canvas-21">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -1975,7 +2131,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-19"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
 </div>
 
 
@@ -2022,7 +2178,7 @@ circle.strokeWidth = 10;
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-20">
+<script type="text/paperscript" canvas="canvas-22">
 var line = new Path({
     segments: [[80, 50], [420, 50]],
     strokeColor: 'black',
@@ -2043,7 +2199,7 @@ var line2 = line.clone();
 line2.position.y += 100;
 line2.strokeCap = 'butt';
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-20"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-22"></canvas></div>
 </div>
 
 
@@ -2090,7 +2246,7 @@ line2.strokeCap = 'butt';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-21">
+<script type="text/paperscript" canvas="canvas-23">
 var path = new Path({
     segments: [[80, 100], [120, 40], [160, 100]],
     strokeColor: 'black',
@@ -2107,7 +2263,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-21"></canvas></div>
+<div class="canvas"><canvas width="516" height="120" id="canvas-23"></canvas></div>
 </div>
 
 
@@ -2211,7 +2367,7 @@ path3.strokeJoin = 'bevel';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-22">
+<script type="text/paperscript" canvas="canvas-24">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 40,
@@ -2222,7 +2378,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-22"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
 </div>
 
 
@@ -2328,7 +2484,7 @@ path.dashArray = [10, 4];
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-23">
+<script type="text/paperscript" canvas="canvas-25">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var circle = new Path.Circle({
@@ -2339,7 +2495,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-23"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
 </div>
 
 
@@ -2414,7 +2570,7 @@ circle.fillColor = new Color(1, 0, 0);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-24">
+<script type="text/paperscript" canvas="canvas-26">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 35,
@@ -2427,7 +2583,7 @@ var circle = new Path.Circle({
     shadowOffset: new Point(5, 5)
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
 </div>
 
 
@@ -2568,7 +2724,7 @@ var circle = new Path.Circle({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-25">
+<script type="text/paperscript" canvas="canvas-27">
 // 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));
@@ -2579,7 +2735,7 @@ path.onFrame = function(event) {
     this.rotate(3);
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
 </div>
 
 
@@ -2623,7 +2779,7 @@ path.onFrame = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-26">
+<script type="text/paperscript" canvas="canvas-28">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -2637,7 +2793,7 @@ path.onMouseDown = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
 </div>
 
 
@@ -2649,7 +2805,7 @@ path.onMouseDown = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-27">
+<script type="text/paperscript" canvas="canvas-29">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -2667,7 +2823,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
 </div>
 
 
@@ -2711,7 +2867,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-28">
+<script type="text/paperscript" canvas="canvas-30">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -2724,7 +2880,7 @@ path.onMouseDrag = function(event) {
     path.position += event.delta;
 }
 </script>
-<div class="canvas"><canvas width="516" height="240" id="canvas-28"></canvas></div>
+<div class="canvas"><canvas width="516" height="240" id="canvas-30"></canvas></div>
 </div>
 
 
@@ -2768,7 +2924,7 @@ path.onMouseDrag = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-29">
+<script type="text/paperscript" canvas="canvas-31">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -2782,7 +2938,7 @@ path.onMouseUp = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
 </div>
 
 
@@ -2826,7 +2982,7 @@ path.onMouseUp = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-30">
+<script type="text/paperscript" canvas="canvas-32">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -2840,7 +2996,7 @@ path.onClick = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
 </div>
 
 
@@ -2852,7 +3008,7 @@ path.onClick = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-31">
+<script type="text/paperscript" canvas="canvas-33">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -2870,7 +3026,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
 </div>
 
 
@@ -2914,7 +3070,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-32">
+<script type="text/paperscript" canvas="canvas-34">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -2928,7 +3084,7 @@ path.onDoubleClick = function(event) {
     this.fillColor = 'red';
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
 </div>
 
 
@@ -2940,7 +3096,7 @@ path.onDoubleClick = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-33">
+<script type="text/paperscript" canvas="canvas-35">
 // Loop 30 times:
 for (var i = 0; i < 30; i++) {
     // Create a circle shaped path at a random position
@@ -2958,7 +3114,7 @@ for (var i = 0; i < 30; i++) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
 </div>
 
 
@@ -3002,7 +3158,7 @@ for (var i = 0; i < 30; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-34">
+<script type="text/paperscript" canvas="canvas-36">
 // Create a circle shaped path at the center of the view:
     var path = new Path.Circle({
     center: view.center,
@@ -3010,180 +3166,567 @@ for (var i = 0; i < 30; i++) {
     fillColor: 'black'
     });
 
-// When the mouse moves on top of the item, set its opacity
-// to a random value between 0 and 1:
-path.onMouseMove = function(event) {
-    this.opacity = Math.random();
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
-</div>
+// When the mouse moves on top of the item, set its opacity
+// to a random value between 0 and 1:
+path.onMouseMove = function(event) {
+    this.opacity = Math.random();
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmouseenter" class="member">
+<div class="member-link">
+<a name="onmouseenter" href="#onmouseenter"><tt><b>onMouseEnter</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The function to be called when the mouse moves over the item. This function will only be called again, once the mouse moved outside of the item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    
+	
+	<ul class="member-list">
+		<h4>See also:</h4>
+		
+			<li><tt><a href="../classes/View.html#onmouseenter"><tt>view.onMouseEnter</tt></a></tt></li>
+		
+	</ul>
+
+	<h4>Example:<span class="description">When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-37">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle({
+    center: view.center,
+    radius: 25,
+    fillColor: 'black'
+});
+
+// When the mouse enters the item, set its fill color to red:
+path.onMouseEnter = function(event) {
+    this.fillColor = 'red';
+}
+
+// When the mouse leaves the item, set its fill color to black:
+path.onMouseLeave = function(event) {
+    this.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
+</div>
+
+
+<h4>Example:<span class="description">When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-38">
+function enter(event) {
+    this.fillColor = 'red';
+}
+
+function leave(event) {
+    this.fillColor = 'black';
+}
+
+// When the mouse is pressed:
+function onMouseDown(event) {
+    // Create a circle shaped path at the position of the mouse:
+    var path = new Path.Circle(event.point, 25);
+    path.fillColor = 'black';
+
+    // When the mouse enters the item, set its fill color to red:
+    path.onMouseEnter = enter;
+
+    // When the mouse leaves the item, set its fill color to black:
+    path.onMouseLeave = leave;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmouseleave" class="member">
+<div class="member-link">
+<a name="onmouseleave" href="#onmouseleave"><tt><b>onMouseLeave</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>The function to be called when the mouse moves out of the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
+	
+	
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Function</tt>⟋<tt>null</tt>
+		</li>
+	</ul>
+    
+	
+	<ul class="member-list">
+		<h4>See also:</h4>
+		
+			<li><tt><a href="../classes/View.html#onmouseleave"><tt>view.onMouseLeave</tt></a></tt></li>
+		
+	</ul>
+
+	<h4>Example:<span class="description">Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-39">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle({
+    center: view.center,
+    radius: 25,
+    fillColor: 'black'
+});
+
+// When the mouse leaves the item, set its fill color to red:
+path.onMouseLeave = function(event) {
+    this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="ondraw" class="member">
+<div class="member-link">
+<a name="ondraw" href="#ondraw"><tt><b>onDraw</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<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>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>
+	
+	<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-40">
+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-40"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<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">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-41">
+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-41"></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="addeffect-effect" class="member">
+<div class="member-link">
+<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>Adds an effect at the end of the item&rsquo;s effects.</p>
+    
+	
+<ul class="member-list">
+	<h4>Parameters:</h4>
+	
+	<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 added instance
+</li>
+
+		
+	</ul>
+
+
+
+	
+	
+</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>
 
 	
-<div id="onmouseenter" class="member">
+<div id="removeeffect-index" class="member">
 <div class="member-link">
-<a name="onmouseenter" href="#onmouseenter"><tt><b>onMouseEnter</b></tt></a>
+<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>The function to be called when the mouse moves over the item. This function will only be called again, once the mouse moved outside of the item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
+	<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 class="member-list">
-		<h4>Type:</h4>
-		<li>
-			<tt>Function</tt>⟋<tt>null</tt>
-		</li>
-	</ul>
-    
+</ul>
+
 	
 	<ul class="member-list">
-		<h4>See also:</h4>
+		<h4>Returns:</h4>
 		
-			<li><tt><a href="../classes/View.html#onmouseenter"><tt>view.onMouseEnter</tt></a></tt></li>
+			<li>
+<tt><a href="../classes/EffectInstance.html"><tt>EffectInstance</tt></a></tt>&nbsp;&mdash;&nbsp;the removed instance, or <code>null</code>
+</li>
+
 		
 	</ul>
 
-	<h4>Example:<span class="description">When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
 
-<div class="paperscript split">
 
-<div class="buttons">
-<div class="button run">Run</div>
+	
+	
 </div>
-
-<script type="text/paperscript" canvas="canvas-35">
-// Create a circle shaped path at the center of the view:
-var path = new Path.Circle({
-    center: view.center,
-    radius: 25,
-    fillColor: 'black'
-});
-
-// When the mouse enters the item, set its fill color to red:
-path.onMouseEnter = function(event) {
-    this.fillColor = 'red';
-}
-
-// When the mouse leaves the item, set its fill color to black:
-path.onMouseLeave = function(event) {
-    this.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
 </div>
-
-
-<h4>Example:<span class="description">When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
-
-<div class="paperscript split">
-
-<div class="buttons">
-<div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-36">
-function enter(event) {
-    this.fillColor = 'red';
-}
-
-function leave(event) {
-    this.fillColor = 'black';
-}
+	
+<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>
 
-// When the mouse is pressed:
-function onMouseDown(event) {
-    // Create a circle shaped path at the position of the mouse:
-    var path = new Path.Circle(event.point, 25);
-    path.fillColor = 'black';
+	
+	<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>
 
-    // When the mouse enters the item, set its fill color to red:
-    path.onMouseEnter = enter;
+		
+	</ul>
 
-    // When the mouse leaves the item, set its fill color to black:
-    path.onMouseLeave = leave;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
-</div>
 
 
+	
+	
 </div>
-
 </div>
 </div>
 
 	
-<div id="onmouseleave" class="member">
+<div id="geteffectoutput" class="member">
 <div class="member-link">
-<a name="onmouseleave" href="#onmouseleave"><tt><b>onMouseLeave</b></tt></a>
+<a name="geteffectoutput" href="#geteffectoutput"><tt><b>getEffectOutput</b>()</tt></a>
 </div>
 <div class="member-description hidden">
-
 <div class="member-text">
-	<p>The function to be called when the mouse moves out of the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
-	
-	
-	
-	<ul class="member-list">
-		<h4>Type:</h4>
-		<li>
-			<tt>Function</tt>⟋<tt>null</tt>
-		</li>
-	</ul>
+	<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>See also:</h4>
+		<h4>Returns:</h4>
 		
-			<li><tt><a href="../classes/View.html#onmouseleave"><tt>view.onMouseLeave</tt></a></tt></li>
+			<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>
 
-	<h4>Example:<span class="description">Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:</span></h4>
-
-<div class="paperscript split">
-
-<div class="buttons">
-<div class="button run">Run</div>
-</div>
-
-<script type="text/paperscript" canvas="canvas-37">
-// Create a circle shaped path at the center of the view:
-var path = new Path.Circle({
-    center: view.center,
-    radius: 25,
-    fillColor: 'black'
-});
-
-// When the mouse leaves the item, set its fill color to red:
-path.onMouseLeave = function(event) {
-    this.fillColor = 'red';
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-37"></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="set-props" class="member">
 <div class="member-link">
@@ -3228,7 +3771,7 @@ path.onMouseLeave = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-38">
+<script type="text/paperscript" canvas="canvas-42">
 var circle = new Path.Circle({
     center: [80, 50],
     radius: 35
@@ -3241,7 +3784,7 @@ circle.set({
     selected: true
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
 </div>
 
 
@@ -3297,7 +3840,7 @@ circle.set({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-39">
+<script type="text/paperscript" canvas="canvas-43">
 var circle = new Path.Circle({
     center: [50, 50],
     radius: 10,
@@ -3312,7 +3855,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-39"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
 </div>
 
 
@@ -3438,7 +3981,7 @@ for (var i = 0; i < 20; i++) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-40">
+<script type="text/paperscript" canvas="canvas-44">
 var circle = new Path.Circle({
     center: [50, 50],
     radius: 5,
@@ -3455,7 +3998,7 @@ raster.position.x += 100;
 circle.scale(5);
 raster.scale(5);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
 </div>
 
 
@@ -3509,7 +4052,7 @@ raster.scale(5);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-41">
+<script type="text/paperscript" canvas="canvas-45">
 var path = new Path.Star({
     center: [50, 50],
     points: 12,
@@ -3530,7 +4073,7 @@ function onMouseDown(event) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
 </div>
 
 
@@ -4048,11 +4591,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>
@@ -5406,7 +5955,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-42">
+<script type="text/paperscript" canvas="canvas-46">
 // 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));
@@ -5415,7 +5964,7 @@ path.fillColor = 'black';
 // Rotate the path by 30 degrees:
 path.rotate(30);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
 </div>
 
 
@@ -5427,7 +5976,7 @@ path.rotate(30);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-43">
+<script type="text/paperscript" canvas="canvas-47">
 // 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);
@@ -5449,7 +5998,7 @@ function onFrame(event) {
     path.rotate(3, view.center);
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-43"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-47"></canvas></div>
 </div>
 
 
@@ -5498,7 +6047,7 @@ function onFrame(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-44">
+<script type="text/paperscript" canvas="canvas-48">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -5510,7 +6059,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-44"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
 </div>
 
 
@@ -5522,7 +6071,7 @@ circle.scale(1.5);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-45">
+<script type="text/paperscript" canvas="canvas-49">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -5534,7 +6083,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-45"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
 </div>
 
 
@@ -5590,7 +6139,7 @@ circle.scale(1.5, circle.bounds.bottomLeft);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-46">
+<script type="text/paperscript" canvas="canvas-50">
 // Create a circle shaped path at { x: 100, y: 50 }
 // with a radius of 20:
 var circle = new Path.Circle({
@@ -5602,7 +6151,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-46"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
 </div>
 
 
@@ -6040,7 +6589,7 @@ circle.scale(3, 1);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-47">
+<script type="text/paperscript" canvas="canvas-51">
 // 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({
@@ -6061,7 +6610,7 @@ var circlePath = new Path.Circle({
 // the rectangular path:
 circlePath.fitBounds(path.bounds);
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
 </div>
 
 
@@ -6073,7 +6622,7 @@ circlePath.fitBounds(path.bounds);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-48">
+<script type="text/paperscript" canvas="canvas-52">
 // 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({
@@ -6094,7 +6643,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-48"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
 </div>
 
 
@@ -6106,7 +6655,7 @@ circlePath.fitBounds(path.bounds, 'cover');
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-49">
+<script type="text/paperscript" canvas="canvas-53">
 var path = new Path.Circle({
     center: [80, 50],
     radius: 30,
@@ -6116,7 +6665,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-49"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-53"></canvas></div>
 </div>
 
 
@@ -6142,7 +6691,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>
 	
@@ -6177,7 +6726,7 @@ path.fitBounds(view.bounds);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-50">
+<script type="text/paperscript" canvas="canvas-54">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -6195,7 +6744,7 @@ path.on('mouseleave', function() {
     this.fillColor = 'black';
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
 </div>
 
 
@@ -6219,7 +6768,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>
 	
@@ -6247,7 +6796,7 @@ path.on('mouseleave', function() {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-51">
+<script type="text/paperscript" canvas="canvas-55">
 // Create a circle shaped path at the center of the view:
 var path = new Path.Circle({
     center: view.center,
@@ -6265,7 +6814,7 @@ path.on({
     }
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
 </div>
 
 
@@ -6277,7 +6826,7 @@ path.on({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-52">
+<script type="text/paperscript" canvas="canvas-56">
 var pathHandlers = {
     mouseenter: function(event) {
         this.fillColor = 'red';
@@ -6300,7 +6849,7 @@ function onMouseDown(event) {
     path.on(pathHandlers);
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
 </div>
 
 
@@ -6324,7 +6873,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>
 	
@@ -6372,7 +6921,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>
 	
@@ -6413,7 +6962,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>
 	
@@ -6461,7 +7010,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>
 	
@@ -6528,7 +7077,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-53">
+<script type="text/paperscript" canvas="canvas-57">
 function onMouseDrag(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -6545,7 +7094,7 @@ function onMouseDrag(event) {
     });
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-53"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-57"></canvas></div>
 </div>
 
 
@@ -6575,7 +7124,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-54">
+<script type="text/paperscript" canvas="canvas-58">
 function onMouseMove(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -6589,7 +7138,7 @@ function onMouseMove(event) {
     path.removeOnMove();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-54"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
 </div>
 
 
@@ -6619,7 +7168,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-55">
+<script type="text/paperscript" canvas="canvas-59">
 function onMouseDown(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -6633,7 +7182,7 @@ function onMouseDown(event) {
     path.removeOnDown();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-55"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-59"></canvas></div>
 </div>
 
 
@@ -6663,7 +7212,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-56">
+<script type="text/paperscript" canvas="canvas-60">
 function onMouseDrag(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -6677,7 +7226,7 @@ function onMouseDrag(event) {
     path.removeOnDrag();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-56"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-60"></canvas></div>
 </div>
 
 
@@ -6707,7 +7256,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-57">
+<script type="text/paperscript" canvas="canvas-61">
 function onMouseDown(event) {
     // Create a circle shaped path at the mouse position,
     // with a radius of 10:
@@ -6721,7 +7270,7 @@ function onMouseDown(event) {
     path.removeOnUp();
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-57"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-61"></canvas></div>
 </div>
 
 
@@ -6794,7 +7343,7 @@ function onMouseDown(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-58">
+<script type="text/paperscript" canvas="canvas-62">
 var path = new Path.Circle({
     radius: view.bounds.height * 0.4,
     center: view.center
@@ -6805,7 +7354,7 @@ path.tween(
     3000
 );
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
 </div>
 
 
@@ -6817,7 +7366,7 @@ path.tween(
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-59">
+<script type="text/paperscript" canvas="canvas-63">
 var path = new Shape.Rectangle({
     fillColor: 'red',
     center: [50, view.center.y],
@@ -6832,7 +7381,7 @@ path.tween({
     duration: 2000
 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-63"></canvas></div>
 </div>
 
 
@@ -6898,7 +7447,7 @@ path.tween({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-60">
+<script type="text/paperscript" canvas="canvas-64">
 var path = new Path.Rectangle({
     size: [100, 100],
     position: view.center,
@@ -6912,7 +7461,7 @@ path.tween({
     'segments[2].point.x': '-= 50'
 }, 3000);
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-60"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-64"></canvas></div>
 </div>
 
 
@@ -6971,7 +7520,7 @@ path.tween({
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-61">
+<script type="text/paperscript" canvas="canvas-65">
 var path = new Path.Circle({
     fillColor: 'blue',
     radius: view.bounds.height * 0.4,
@@ -6987,7 +7536,7 @@ path.tween(2000).onUpdate = function(event) {
     path.interpolate(pathFrom, pathTo, event.factor)
 };
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-65"></canvas></div>
 </div>
 
 
@@ -7108,7 +7657,7 @@ path.tween(2000).onUpdate = function(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-62">
+<script type="text/paperscript" canvas="canvas-66">
 var path = new Path.Circle({
     fillColor: 'blue',
     radius: view.bounds.height * 0.4,
@@ -7116,7 +7665,7 @@ var path = new Path.Circle({
 });
 path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-66"></canvas></div>
 </div>
 
 
@@ -7130,7 +7679,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.16.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>