paper 0.14.0 → 0.15.0

package/dist/docs/classes/PaperScript.html

@@ -17,6 +17,7 @@
 
 
 
+
 </div>
 
 
@@ -96,6 +97,8 @@
 <li><tt>options.url: <tt>String</tt></tt> &mdash; the url of the source, for source-map  generation</li>
 <li><tt>options.source: <tt>String</tt></tt> &mdash; the source to be used for the source-  mapping, in case the code that&rsquo;s passed in has already been mingled.</li>
 <li><tt>options.handlers: Array of <tt>Strings</tt></tt> &mdash; the names of further global  handlers to export next to <code>onFrame</code>, <code>onResize</code> and the tool&rsquo;s  handlers, for hosts that call them themselves</li>
+<li><tt>options.load: <tt>Function</tt></tt> &mdash; the loader for static <code>import</code>  statements, called with the specifier as written and the  <code>options.url</code> of the importing script, and returning the module&rsquo;s  exports, e.g. the result of executing it. Modules with ES <code>export</code>  statements have their default export as <code>default</code> and are marked  with <code>__esModule</code>, so <code>import x</code> receives the default export, and  for CommonJS-style exports the whole exports. <code>import * as x</code>  receives all exports, and for CommonJS-style exports, these as  <code>default</code> too. Dynamic <code>import(specifier)</code> resolves to that  namespace as a Promise, and its loader may return a Promise as well.  The loader runs each module once and handles cycles. Parsing  <code>import</code> requires a current Acorn as <code>self.acorn</code>
+Code with top-level <code>await</code> runs as an async function. <code>execute()</code> then returns a Promise of the exports, and installs the global handlers once it resolves. Parsing it requires a current Acorn as <code>self.acorn</code>.</li>
 </ul>
 	
 <ul class="member-list">
@@ -129,7 +132,7 @@
 		<h4>Returns:</h4>
 		
 			<li>
-<tt><tt>Object</tt></tt>&nbsp;&mdash;&nbsp;the exports defined in the executed code
+<tt><tt>Object</tt>⟋<tt>Promise</tt></tt>&nbsp;&mdash;&nbsp;the exports defined in the executed code, or  with top-level <code>await</code>, a Promise of them
 </li>
 
 		
@@ -190,7 +193,7 @@
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.14.0<br>
+Paper.js v0.15.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>
 

package/dist/docs/classes/Path.html

@@ -19,6 +19,7 @@
 
 <p>The path item represents a path in a Paper.js project.</p>
 
+
 </div>
 
 <!-- =============================== constructors ========================== -->
@@ -3352,7 +3353,7 @@ for (var i = 0; i < amount + 1; i++) {
 <div class="member-description hidden">
 
 <div class="member-text">
-	<p>The key of the host&rsquo;s node that the item represents, in a project backed by a host document, see <a href="../classes/Project.html#source"><tt>project.source</tt></a>. It can only be set once, on an item created by a script, to register the key that the host gave its new node.</p>
+	<p>The key of the host&rsquo;s node that the item represents, in a project backed by a host document, see <a href="../classes/Project.html#host"><tt>project.host</tt></a>. It can only be set once, on an item created by a script, to register the key that the host gave its new node.</p>
 	
 	
 	
@@ -3717,7 +3718,7 @@ path.visible = false;
 <div class="member-description hidden">
 
 <div class="member-text">
-	<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. If blend-modes cannot be rendered natively, they are emulated. Be aware that emulation can have an impact on performance.</p>
+	<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. Where the canvas doesn&rsquo;t support a CSS blend mode natively, it draws as <code>&#39;normal&#39;</code>. Paper.js&rsquo;s own modes <code>&#39;add&#39;</code>, <code>&#39;subtract&#39;</code>, <code>&#39;average&#39;</code>, <code>&#39;pin-light&#39;</code> and <code>&#39;negation&#39;</code> are emulated, which can have an impact on performance.</p>
 	
 	
 		<ul class="member-list">
@@ -3870,6 +3871,42 @@ circle2.opacity = 0.5;
 </div>
 
 	
+<div id="textwrap" class="member">
+<div class="member-link">
+<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
+</div>
+<div class="member-description hidden">
+
+<div class="member-text">
+	<p>Specifies whether, and how, the item pushes aside the text of the <a href="../classes/AreaText.html"><tt>AreaText</tt></a> items below it in its layer: <code>null</code>, or an object with <code>offset</code>, the space kept between them, and <code>invert</code>, to let the text flow inside it instead. <code>true</code> sets the defaults.</p>
+	
+	
+	
+		<ul class="member-list">
+			<h4>Default:</h4>
+			<li><tt>null</tt></li>
+		</ul>
+	
+	<ul class="member-list">
+		<h4>Type:</h4>
+		<li>
+			<tt>Object</tt>
+		</li>
+	</ul>
+    
+	
+	<h4>Example:</h4>
+
+
+<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
+circle.textWrap = { offset: 10 };</code></pre>
+
+</div>
+
+</div>
+</div>
+
+	
 <div id="selected" class="member">
 <div class="member-link">
 <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
@@ -4166,6 +4203,7 @@ circle.position.x += 100;
 
 <div class="member-text">
 	<p>The bounding rectangle of the item including stroke width.</p>
+<p>Setting it fits the item&rsquo;s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> into the given rectangle minus the extent of the stroke on each side, also where this extent changes with the item&rsquo;s proportions, as with miters. A rectangle smaller than the stroke itself shrinks the bounds to its center.</p>
 	
 	
 	
@@ -6305,9 +6343,9 @@ for (var i = 0; i < 20; i++) {
 	<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
     <ul class="member-list">
 <h4>Options:</h4>
-<li><tt>resolution: <tt>Number</tt></tt> &mdash; the desired resolution to  be used when rasterizing, in pixels per inch (DPI). If not specified,  the value of <code>view.resolution</code> is used by default. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
-<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; specifies a raster to be reused when  rasterizing. If the raster has the desired size already, then the  underlying canvas is reused and no new memory needs to be allocated.  If no raster is provided, a new raster item is created and returned  instead. &mdash;&nbsp;default: <tt>null</tt></li>
-<li><tt>insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster should be  inserted into the scene graph. When set to <code>true</code>, it is inserted  above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
+<li><tt>options.resolution: <tt>Number</tt></tt> &mdash; the desired  resolution to be used when rasterizing, in pixels per inch (DPI). If  not specified, the value of <code>view.resolution</code> is used by default. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
+<li><tt>options.raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; specifies a raster to be reused  when rasterizing. If the raster has the desired size already, then the  underlying canvas is reused and no new memory needs to be allocated.  If no raster is provided, a new raster item is created and returned  instead. &mdash;&nbsp;default: <tt>null</tt></li>
+<li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster  should be inserted into the scene graph. When set to <code>true</code>, it is  inserted above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
 </ul>
 	
 <ul class="member-list">
@@ -6492,7 +6530,7 @@ function onMouseDown(event) {
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	
+	<p>Checks whether the item overlaps with the given item: whether their outlines cross, or one contains the other, as <a href="../classes/Rectangle.html#intersects-rect"><tt>rectangle.intersects(rect)</tt></a> does for rectangles. Items other than paths and shapes are checked through their bounds. To only check whether outlines cross, use <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>.</p>
     
 	
 <ul class="member-list">
@@ -6512,7 +6550,7 @@ function onMouseDown(event) {
 		<h4>Returns:</h4>
 		
 			<li>
-<tt><tt>Boolean</tt></tt>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items overlap, <tt>false</tt> otherwise
 </li>
 
 		
@@ -7008,6 +7046,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>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>
 <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape  items should be expanded to path items &mdash;&nbsp;default: <tt>false</tt></li>
@@ -7520,11 +7559,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
 	
 <div id="replacewith-item" class="member">
 <div class="member-link">
-<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
+<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Replaces this item with the provided new item which will takes its place in the project hierarchy instead.</p>
+	<p>Replaces this item with the provided new items which will take its place in the project hierarchy instead, in the given order. This also ungroups a group, e.g. <code>group.replaceWith(…group.children)</code>, but note that the items keep their own matrices, see <a href="../classes/Group.html#ungroup"><tt>group.ungroup</tt></a>().</p>
     
 	
 <ul class="member-list">
@@ -7533,7 +7572,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
 	<li>
 <tt>item:</tt> 
 <a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item that will replace this item
+&mdash;&nbsp;the items that will replace this item
 
 </li>
 	
@@ -9348,10 +9387,10 @@ function onMouseDown(event) {
 	<p>Removes the item when the events specified in the passed options object occur.</p>
     <ul class="member-list">
 <h4>Options:</h4>
-<li><tt>options.move: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
-<li><tt>options.drag: undefined</tt> &mdash; {Boolena) remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
-<li><tt>options.down: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
-<li><tt>options.up: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
+<li><tt>options.move: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
+<li><tt>options.drag: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
+<li><tt>options.down: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
+<li><tt>options.up: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
 </ul>
 	
 <ul class="member-list">
@@ -10085,10 +10124,10 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Unites the geometry of the specified path with this path&rsquo;s geometry and returns the result as a new path item.</p>
+	<p>Unites 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 any of them or this path. 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 both paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
+<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">
@@ -10096,8 +10135,8 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
 	
 	<li>
 <tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
-&mdash;&nbsp;the path to unite with
+<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 unite with
 
 </li>
 	
@@ -10141,6 +10180,26 @@ result.fillColor = 'red';
 </div>
 
 
+<h4>Example:<span class="description">Uniting many paths at once:</span></h4>
+
+<div class="paperscript split">
+
+<div class="buttons">
+<div class="button run">Run</div>
+</div>
+
+<script type="text/paperscript" canvas="canvas-109">
+var circles = [];
+for (var i = 0; i < 6; i++) {
+    circles.push(new Path.Circle([30 + i * 20, 50], 20));
+}
+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>
+
+
 </div>
 </div>
 </div>
@@ -10152,11 +10211,11 @@ result.fillColor = 'red';
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Intersects the geometry of the specified path with this path&rsquo;s geometry and returns the result as a new path item.</p>
+	<p>Intersects 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 all of them and this path. 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 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, keeping the parts of  the curves that intersect with the area of the second path. &mdash;&nbsp;default: <tt>true</tt></li>
+<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.trace: <tt>Boolean</tt></tt> &mdash; whether the tracing method is  used, treating all 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, keeping the parts of  the curves that intersect with the areas of all other paths. &mdash;&nbsp;default: <tt>true</tt></li>
 </ul>
 	
 <ul class="member-list">
@@ -10164,8 +10223,8 @@ result.fillColor = 'red';
 	
 	<li>
 <tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
-&mdash;&nbsp;the path to intersect with
+<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 intersect  with
 
 </li>
 	
@@ -10200,12 +10259,12 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-109">
+<script type="text/paperscript" canvas="canvas-110">
 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-109"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-110"></canvas></div>
 </div>
 
 
@@ -10220,11 +10279,11 @@ result.fillColor = 'red';
 </div>
 <div class="member-description hidden">
 <div class="member-text">
-	<p>Subtracts the geometry of the specified path from this path&rsquo;s geometry and returns the result as a new path item.</p>
+	<p>Subtracts the geometry of the specified path from 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 this path and outside all of them. 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 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, removing the parts of  the curves that intersect with the area of the second path. &mdash;&nbsp;default: <tt>true</tt></li>
+<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.trace: <tt>Boolean</tt></tt> &mdash; whether the tracing method is  used, treating all 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, removing the parts of  the curves that intersect with the area of any other path. &mdash;&nbsp;default: <tt>true</tt></li>
 </ul>
 	
 <ul class="member-list">
@@ -10232,8 +10291,8 @@ result.fillColor = 'red';
 	
 	<li>
 <tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
-&mdash;&nbsp;the path to subtract
+<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 subtract
 
 </li>
 	
@@ -10268,12 +10327,12 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-110">
+<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>
-<div class="canvas"><canvas width="516" height="100" id="canvas-110"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-111"></canvas></div>
 </div>
 
 
@@ -10288,10 +10347,10 @@ result.fillColor = 'red';
 </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.</p>
+	<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 both paths  involved in the operation &mdash;&nbsp;default: <tt>true</tt></li>
+<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">
@@ -10299,8 +10358,8 @@ result.fillColor = 'red';
 	
 	<li>
 <tt>path:</tt> 
-<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
-&mdash;&nbsp;the path to exclude the intersection of
+<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>
 	
@@ -10335,12 +10394,12 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-111">
+<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>
-<div class="canvas"><canvas width="516" height="100" id="canvas-111"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-112"></canvas></div>
 </div>
 
 
@@ -10508,7 +10567,7 @@ result.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-112">
+<script type="text/paperscript" canvas="canvas-113">
 var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
 path.strokeColor = 'black';
 
@@ -10531,7 +10590,7 @@ function onFrame(event) {
     }
 }
 </script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-112"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-113"></canvas></div>
 </div>
 
 
@@ -10672,7 +10731,7 @@ function onFrame(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-113">
+<script type="text/paperscript" canvas="canvas-114">
 var star = new Path.Star({
     center: view.center,
     points: 10,
@@ -10696,7 +10755,7 @@ function onMouseMove(event) {
     circle.position = nearestPoint;
 }
 </script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-113"></canvas></div>
+<div class="canvas"><canvas width="516" height="200" id="canvas-114"></canvas></div>
 </div>
 
 
@@ -10759,7 +10818,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-114">
+<script type="text/paperscript" canvas="canvas-115">
 // Create a circle shaped path at { x: 80, y: 50 }
 // with a radius of 35:
 var path = new Path.Circle({
@@ -10777,7 +10836,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-114"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-115"></canvas></div>
 </div>
 
 
@@ -10855,7 +10914,7 @@ copy.flatten(4);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-115">
+<script type="text/paperscript" canvas="canvas-116">
 // 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({
@@ -10874,7 +10933,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-115"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-116"></canvas></div>
 </div>
 
 
@@ -10886,7 +10945,7 @@ copy.smooth({ type: 'continuous' });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-116">
+<script type="text/paperscript" canvas="canvas-117">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -10911,7 +10970,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-116"></canvas></div>
+<div class="canvas"><canvas width="516" height="220" id="canvas-117"></canvas></div>
 </div>
 
 
@@ -10923,7 +10982,7 @@ copy.smooth({ type: 'catmull-rom', factor: 0.5 });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-117">
+<script type="text/paperscript" canvas="canvas-118">
 // Create 5 rectangles, next to each other:
 var paths = [];
 for (var i = 0; i < 5; i++) {
@@ -10953,7 +11012,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-117"></canvas></div>
+<div class="canvas"><canvas width="516" height="110" id="canvas-118"></canvas></div>
 </div>
 
 
@@ -11006,7 +11065,7 @@ paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-118">
+<script type="text/paperscript" canvas="canvas-119">
 var path;
 function onMouseDown(event) {
     // If we already made a path before, deselect it:
@@ -11036,7 +11095,7 @@ function onMouseUp(event) {
     path.selected = true;
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-118"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-119"></canvas></div>
 </div>
 
 
@@ -11235,7 +11294,7 @@ function onMouseUp(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-119">
+<script type="text/paperscript" canvas="canvas-120">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11255,7 +11314,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-119"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-120"></canvas></div>
 </div>
 
 
@@ -11267,7 +11326,7 @@ circle.fillColor = 'red';
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-120">
+<script type="text/paperscript" canvas="canvas-121">
 var myPath;
 function onMouseDrag(event) {
     // If we created a path before, remove it:
@@ -11295,7 +11354,7 @@ function onMouseUp(event) {
     myPath.fillColor = 'black';
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-120"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-121"></canvas></div>
 </div>
 
 
@@ -11344,7 +11403,7 @@ function onMouseUp(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-121">
+<script type="text/paperscript" canvas="canvas-122">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11359,7 +11418,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-121"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-122"></canvas></div>
 </div>
 
 
@@ -11371,7 +11430,7 @@ path2.arcTo(new Point(280, 25), false);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-122">
+<script type="text/paperscript" canvas="canvas-123">
 var myPath;
 
 // The mouse has to move at least 20 points before
@@ -11392,7 +11451,7 @@ function onMouseDrag(event) {
     myPath.arcTo(event.point);
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-122"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-123"></canvas></div>
 </div>
 
 
@@ -11448,7 +11507,7 @@ function onMouseDrag(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-123">
+<script type="text/paperscript" canvas="canvas-124">
 var myPath;
 function onMouseMove(event) {
     // If we created a path before, remove it:
@@ -11469,7 +11528,7 @@ function onMouseMove(event) {
     myPath.selected = true;
 }
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-123"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-124"></canvas></div>
 </div>
 
 
@@ -11654,7 +11713,7 @@ function onMouseMove(event) {
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-124">
+<script type="text/paperscript" canvas="canvas-125">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11668,7 +11727,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-124"></canvas></div>
+<div class="canvas"><canvas width="516" height="100" id="canvas-125"></canvas></div>
 </div>
 
 
@@ -11680,7 +11739,7 @@ path.lineBy(0, 50);
 <div class="button run">Run</div>
 </div>
 
-<script type="text/paperscript" canvas="canvas-125">
+<script type="text/paperscript" canvas="canvas-126">
 var path = new Path();
 path.strokeColor = 'black';
 
@@ -11706,7 +11765,7 @@ path.smooth();
 // the construction of the path:
 // path.selected = true;
 </script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-125"></canvas></div>
+<div class="canvas"><canvas width="516" height="300" id="canvas-126"></canvas></div>
 </div>
 
 
@@ -11925,7 +11984,7 @@ path.smooth();
 
 <!-- =========================== copyright notice ========================== -->
 <p class="footer">
-Paper.js v0.14.0<br>
+Paper.js v0.15.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>