From 3db468885f076e7a4ef0684d7a1bbdc26bfccb6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B9=D0=BB=D0=BE=D0=B2=20=D0=90?=
 =?UTF-8?q?=D0=BD=D1=82=D0=BE=D0=BD?= <anion155@gmail.com>
Date: Tue, 14 May 2019 03:52:32 +0500
Subject: [PATCH] [paper] Include Base class definition + type save getters and
 setters (#35285)

* [paper] Add Base class

* [paper] Type save getters and setters

* [paper] import/export test

* [paper] Fix: "Common mistakes"

* [paper] Tabs to spaces
---
 types/paper/index.d.ts     |  349 +--
 types/paper/paper-tests.ts | 5602 ++++++++++++++++++------------------
 2 files changed, 2984 insertions(+), 2967 deletions(-)

diff --git a/types/paper/index.d.ts b/types/paper/index.d.ts
index 2d8f839c20..07ef128da3 100644
--- a/types/paper/index.d.ts
+++ b/types/paper/index.d.ts
@@ -4,7 +4,9 @@
 //                  Jon Lucas <https://github.com/Xakaloz>,
 //                  Sebastian Lopez <https://github.com/sebaswebdev>
 //                  Ryan Friedman <https://github.com/rfried>
+//                  Mikhaylov Anton <https://github.com/anion155>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
 
 type NativeMouseEvent = MouseEvent;
 
@@ -13,6 +15,68 @@ type NativeMouseEvent = MouseEvent;
  */
 declare module paper {
 
+    /**
+     * Base class for all library classes.
+     */
+    class Base {
+        /**
+         * Checks if two values or objects are equals to each other, by using their
+         * equals() methods if available, and also comparing elements of arrays and
+         * properties of objects.
+         */
+        static equals(obj1: any, obj2: any): boolean;
+
+        /**
+         * Imports (deserializes) the stored JSON data into the target, if the
+         * classes match. If they do not match, a newly created object is returned
+         * instead.
+         */
+        static importJSON(json: object | any[] | string, target?: any): any;
+        static importJSON<T extends Base>(json: T, target?: T): T;
+
+        /**
+         * Exports (serializes) object to a JSON data object or string.
+         *
+         *
+         * @param options [optional] - the serialization options
+         * @option [options.asString=true] - whether the JSON is returned as a Object or a String.
+         * @option [options.precision=5] - the amount of fractional digits in numbers used in JSON data.
+         * @return the exported JSON data
+         */
+        static exportJSON(obj: any, options?: { asString?: true; precision?: number; }): string;
+        static exportJSON(obj: any, options: { asString: false; precision?: number; }): object | any[];
+
+        /**
+         * Imports (deserializes) the stored JSON data into the object, if the
+         * classes match. If they do not match, a newly created object is returned
+         * instead.
+         */
+        importJSON(json: string): void;
+        importJSON<T extends Base>(json: T): T;
+
+        /**
+         * Exports (serializes) this object to a JSON data object or string.
+         *
+         *
+         * @param options [optional] - the serialization options
+         * @option [options.asString=true] - whether the JSON is returned as a Object or a String.
+         * @option [options.precision=5] - the amount of fractional digits in numbers used in JSON data.
+         * @return the exported JSON data
+         */
+        exportJSON(options?: { asString?: true; precision?: number; }): string;
+        exportJSON(options: { asString: false; precision?: number; }): object | any[];
+
+        /**
+         * Renders base objects to strings in object literal notation.
+         */
+        toString(): string;
+
+        /**
+         * Same as `exportJSON({ asString: false })`.
+         */
+        toJSON(): string;
+    }
+
     /**
      * The version of Paper.js, as a string.
      */
@@ -72,8 +136,7 @@ declare module paper {
      * Such a coordinate transformation can be represented by a 3 row by 3 column matrix with an implied last row of [ 0 0 1 ]. This matrix transforms source coordinates (x,y) into destination coordinates (x',y') by considering them to be a column vector and multiplying the coordinate vector by the matrix according to the following process:
      * This class is optimized for speed and minimizes calculations based on its knowledge of the underlying matrix (as opposed to say simply performing matrix multiplication).
      */
-    export class Matrix {
-
+    export class Matrix extends Base {
         /**
          * Creates a 2D affine transform.
          * @param a - the a property of the transform
@@ -190,11 +253,6 @@ declare module paper {
          */
         equals(matrix: Matrix): boolean;
 
-        /**
-         * returns a string representation of this transform
-         */
-        toString(): string;
-
         /**
          * Resets the matrix by setting its values to the ones of the identity matrix that results in no transformation.
          */
@@ -360,7 +418,7 @@ declare module paper {
          * Attempts to decompose the affine transformation described by this matrix into scaling, rotation and shearing, and returns an object with these properties if it succeeded, null otherwise.
          */
         decompose(): any;
-        
+
         /**
          * Inverts the matrix, causing it to perform the opposite transformation. If the matrix is not invertible (in which case isSingular() returns true), null is returned.
          */
@@ -381,7 +439,7 @@ declare module paper {
     /**
      * The Point object represents a point in the two dimensional space of the Paper.js project. It is also used to represent two dimensional vector objects.
      */
-    export class Point {
+    export class Point extends Base {
 
         /**
          * Returns a new point object with the smallest x and y of the supplied points.
@@ -514,11 +572,6 @@ declare module paper {
          */
         clone(): Point;
 
-        /**
-         * a string representation of the point
-         */
-        toString(): string;
-
         /**
          * Returns the smaller angle between two vectors. The angle is unsigned, no information about rotational direction is given.
          * @param point -
@@ -692,7 +745,7 @@ declare module paper {
     /**
      * A Rectangle specifies an area that is enclosed by it's top-left point (x, y), its width, and its height. It should not be confused with a rectangular path, it is not an item.
      */
-    export class Rectangle {
+    export class Rectangle extends Base {
 
         /**
          * Creates a Rectangle object.
@@ -882,11 +935,6 @@ declare module paper {
          */
         equals(rect: Rectangle): boolean;
 
-        /**
-         * a string representation of this rectangle
-         */
-        toString(): string;
-
         /**
          * Returns true if the rectangle is empty, false otherwise
          */
@@ -962,7 +1010,7 @@ declare module paper {
     /**
      * The Size object is used to describe the size or dimensions of something, through its width and height properties.
      */
-    export class Size {
+    export class Size extends Base {
 
         /**
          * Returns a new size object with the smallest width and height of the supplied sizes.
@@ -1034,11 +1082,6 @@ declare module paper {
          */
         clone(): Size;
 
-        /**
-         * a string representation of the size
-         */
-        toString(): string;
-
         /**
          * Checks if this size has both the width and height set to 0.
          */
@@ -1109,32 +1152,32 @@ declare module paper {
         modulo(size: number[]): Size;
         modulo(size: number): Size;
 
-		/**
-		 * Sets the size with the given width and height values.
+        /**
+         * Sets the size with the given width and height values.
          * @param width - the width
          * @param height - the height
-		 */
-		set(width: number, height: number): Size;
+         */
+        set(width: number, height: number): Size;
 
-		/**
-		 * Sets the size using the numbers in the given array as dimensions.
+        /**
+         * Sets the size using the numbers in the given array as dimensions.
          * @param array - an array of numbers
-		 */
-		set(array: number[]): Size;
-		
-		/**
-		 * Sets the size using the properties in the given object.
+         */
+        set(array: number[]): Size;
+
+        /**
+         * Sets the size using the properties in the given object.
          * @param object - the object literal containing properies (width:10, height:10 etc)
-		 */
-		set(object: any): Size;
-		
-		/**
-		 * Sets the size using the coordinates of the given Size object.
+         */
+        set(object: any): Size;
+
+        /**
+         * Sets the size using the coordinates of the given Size object.
          * @param size - the size to duplicate from
          */
-		set(size: Size): Size;
-		
-		/**
+        set(size: Size): Size;
+
+        /**
          * Sets the size using the point.x and point.y values of the given Point object.
          * @param point - the point from which to create a size
          */
@@ -1165,7 +1208,7 @@ declare module paper {
      * Paper classes can only be accessed through PaperScope objects. Thus in PaperScript they are global, while in JavaScript, they are available on the global paper object. For JavaScript you can use paperScope.install(scope) to install the Paper classes and objects on the global scope. Note that when working with more than one scope, this still works for classes, but not for objects like paperScope.project, since they are not updated in the injected scope if scopes are switched.
      * The global paper object is simply a reference to the currently active PaperScope.
      */
-    export class PaperScope {
+    export class PaperScope extends Base {
 
         /**
          * The version of Paper.js, as a string.
@@ -1308,12 +1351,12 @@ declare module paper {
          * only hit selected items.
          */
         selected?: boolean;
-        
+
     }
     /**
      * The Item type allows you to access and modify the items in Paper.js projects. Its functionality is inherited by different project item types such as Path, CompoundPath, Group, Layer and Raster. They each add a layer of functionality that is unique to their type, but share the underlying properties and functions that they inherit from Item.
      */
-    export class Item {
+    export class Item extends Base {
 
         /**
          * The tangential vector to the #curve at the given location.
@@ -1350,13 +1393,15 @@ declare module paper {
         /**
          * The path style of the item.
          */
-        style: Style;
-        
+        style: Partial<Style>;
+        getStyle(): Style;
+        setStyle(value: Partial<Style>): void;
+
         /**
          * Specifies whether the item is locked. When set to true, item interactions with the mouse are disabled.
          */
         locked: boolean;
-        
+
         /**
          * Specifies whether the item is visible. When set to false, the item won't be drawn.
          */
@@ -1377,7 +1422,7 @@ declare module paper {
          * Specifies whether the item is selected. This will also return true for Group items if they are partially selected, e.g. groups containing selected or partially selected paths.
          * Paper.js draws the visual outlines of selected items on top of your project. This can be useful for debugging, as it allows you to see the construction of paths, position of path curves, individual segment points and bounding boxes of symbol and raster items.
          */
-        selected: boolean;        
+        selected: boolean;
 
         /**
          * Specifies whether the item and all children are selected.
@@ -1511,6 +1556,8 @@ declare module paper {
          * The color of the stroke.
          */
         strokeColor: Color | string | null;
+        getStrokeColor(): Color;
+        setStrokeColor(value: Color | string | null): void;
 
         /**
          * The width of the stroke.
@@ -1559,6 +1606,8 @@ declare module paper {
          * The fill color of the item.
          */
         fillColor: Color | string | null;
+        getFillColor(): Color;
+        setFillColor(value: Color | string | null): void;
 
         /**
          * The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than 'nonzero'.
@@ -1571,6 +1620,8 @@ declare module paper {
          * The shadow color.
          */
         shadowColor: Color | string | null;
+        getShadowColor(): Color;
+        setShadowColor(value: Color | string | null): void;
 
         /**
          * The shadow’s blur radius.
@@ -1588,6 +1639,8 @@ declare module paper {
          * The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.
          */
         selectedColor: Color | string;
+        getSelectedColor(): Color;
+        setSelectedColor(value: Color | string): void;
 
         /**
          * Item level handler function to be called on each frame of an animation.
@@ -1621,7 +1674,7 @@ declare module paper {
         onClick: (event: MouseEvent) => void | boolean;
 
         /**
-         * The function to be called when the mouse double clicks on the item. The function receives a MouseEvent object which contains information about the mouse event.         * 
+         * The function to be called when the mouse double clicks on the item. The function receives a MouseEvent 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 event.stopPropagation() or by returning false from the handler.
          */
         onDoubleClick: (event: MouseEvent) => void | boolean;
@@ -1772,20 +1825,6 @@ declare module paper {
          */
         getItem(match: any): Item;
 
-        /**
-         * Exports (serializes) the project with all its layers and child items to a JSON data string.
-         * @param options [optional] - default {asString: true, precision: 5}
-         * @param options.asString - whether the JSON is returned as a Object or a String.
-         * @param options.precision - the amount of fractional digits in numbers used in JSON data.
-         */
-        exportJSON(options?: { asString?: boolean; precision?: number; }): string;
-
-        /**
-         * Imports (deserializes) the stored JSON data into the project.
-         * Note that the project is not cleared first. You can call project.clear() to do so.
-         */
-        importJSON(json: string): void;
-
         /**
          * Exports the project with all its layers and child items as an SVG DOM, all contained in one top level SVG group node.
          * @param options [optional] the export options, default: { asString: false, precision: 5, matchShapes: false, bounds: 'view', matrix: paper.view.matrix, embedImages: true  }
@@ -1818,7 +1857,7 @@ declare module paper {
          * @param onLoad [optional] - the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted item and the original svg data as a string. Only required when loading from external resources.
          */
         importSVG(svg: SVGElement | string, onLoad?: (item: Item, svg: string) => void): Item;
-        
+
         /**
          * Adds the specified item as a child of this item at the end of the its children list. You can use this function for groups, compound paths and layers.
          * @param item - the item to add as a child
@@ -1898,13 +1937,13 @@ declare module paper {
          * @param owner - the item or project to add the item to
          */
         addTo(owner: Project | Layer | Group | CompoundPath): Item;
-        
+
         /**
          * Clones the item and adds it to the specified owner, which can be either a Item or a Project.
          * @param owner - the item or project to copy the item to
          */
         copyTo(owner: Project | Layer | Group | CompoundPath): Item;
-        
+
         /**
          * If this is a group, layer or compound-path with only one child-item, the child-item is moved outside and the parent is erased. Otherwise, the item itself is returned unmodified.
          * @param options [optional]
@@ -2561,7 +2600,7 @@ declare module paper {
     /**
      * A HitResult object contains information about the results of a hit test. It is returned by item.hitTest(point) and project.hitTest(point).
      */
-    export class HitResult {
+    export class HitResult extends Base {
 
         /**
          * Describes the type of the hit result. For example, if you hit a segment point, the type would be 'segment'.
@@ -2633,7 +2672,7 @@ declare module paper {
          * Specifies whether the path as a whole is oriented clock-wise, by looking at the path’s area. Note that self-intersecting paths and sub-paths of different orientation can result in areas that cancel each other out.
          */
         clockwise: boolean;
-        
+
         /**
          * The path's geometry, formatted as SVG style path data.
          */
@@ -2660,7 +2699,7 @@ declare module paper {
          * @param path - the path to intersect with
          * @param options [optional] - the boolean operation options. default { insert: true, trace: true }
          * @param options.insert - whether the resulting item should be inserted back into the scene graph, above both paths involved in the operation.
-         * @param options.trace - 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. 
+         * @param options.trace - 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.
          */
         intersect(path: PathItem, options?: { insert?: boolean; trace?: boolean; }): PathItem;
 
@@ -2669,7 +2708,7 @@ declare module paper {
          * @param path - the path to subtract
          * @param options [optional] - the boolean operation options. default { insert: true, trace: true }
          * @param options.insert - whether the resulting item should be inserted back into the scene graph, above both paths involved in the operation.
-         * @param options.trace - 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. 
+         * @param options.trace - 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.
          */
         subtract(path: PathItem, options?: { insert?: boolean; trace?: boolean; }): PathItem;
 
@@ -2787,7 +2826,7 @@ declare module paper {
          * @param point - the end point of the line
          */
         lineTo(point: Point): void;
-        
+
         /**
          * Draws an arc from the position of the last segment point in the path that goes through the specified through point, to the specified to point by adding one or more segments to the path.
          * @param through - the point where the arc should pass through
@@ -3027,7 +3066,7 @@ declare module paper {
          * Clears the path’s handles by setting their coordinates to zero, turning the path into a polygon (or a polyline if it isn’t closed).
          */
         clearHandles(): void;
-        
+
         /**
          * Divides the path on the curve at the given location into two curves, by inserting a new segment at the given location.
          * @param location - the curve location at which to divide the existing curve by inserting a new segment
@@ -3244,8 +3283,8 @@ declare module paper {
              * @param object - an object literal containing properties describing the path's attributes
              */
             constructor(object: any);
-            
-            
+
+
             /**
              * Clones the item within the same project and places the copy above the item.
              * @param options [optional] - default: { insert: true, deep: true }
@@ -3269,7 +3308,7 @@ declare module paper {
              * @param object - an object literal containing properties describing the path's attributes
              */
             constructor(object: any);
-            
+
             /**
              * Clones the item within the same project and places the copy above the item.
              * @param options [optional] - default: { insert: true, deep: true }
@@ -3293,7 +3332,7 @@ declare module paper {
              * @param object - an object literal containing properties describing the path's attributes
              */
             constructor(object: any);
-            
+
             /**
              * Clones the item within the same project and places the copy above the item.
              * @param options [optional] - default: { insert: true, deep: true }
@@ -3318,7 +3357,7 @@ declare module paper {
              * @param object - an object literal containing properties describing the path's attributes
              */
             constructor(object: any);
-            
+
             /**
              * Clones the item within the same project and places the copy above the item.
              * @param options [optional] - default: { insert: true, deep: true }
@@ -3345,7 +3384,7 @@ declare module paper {
          * @param pathData - the SVG path-data that describes the geometry of this path.
          */
         constructor(pathData: string);
-        
+
         /**
          * Specifies whether the path is closed. If it is closed, Paper.js connects the first and last segments.
          */
@@ -3392,7 +3431,7 @@ declare module paper {
          * Read only.
          */
         readonly length: number;
-        
+
         /**
          * Clones the item within the same project and places the copy above the item.
          * @param options [optional] - default: { insert: true, deep: true }
@@ -3405,7 +3444,7 @@ declare module paper {
      * The Segment object represents the points of a path through which its Curve objects pass. The segments of a path can be accessed through its path.segments array.
      * Each segment consists of an anchor point (segment.point) and optionaly an incoming and an outgoing handle (segment.handleIn and segment.handleOut), describing the tangents of the two Curve objects that are connected by this segment.
      */
-    export class Segment {
+    export class Segment extends Base {
 
         /**
          * Creates a new Segment object.
@@ -3544,11 +3583,6 @@ declare module paper {
          */
         clone(): Segment;
 
-        /**
-         * A string representation of the segment
-         */
-        toString(): string;
-
         /**
          * Transform the segment by the specified matrix.
          * @param matrix - the matrix to transform the segment by
@@ -3568,7 +3602,7 @@ declare module paper {
      * The Curve object represents the parts of a path that are connected by two following Segment objects. The curves of a path can be accessed through its path.curves array.
      * While a segment describe the anchor point and its incoming and outgoing handles, a Curve object describes the curve passing between two such segments. Curves and segments represent two different ways of looking at the same thing, but focusing on different aspects. Curves for example offer many convenient ways to work with parts of the path, finding lengths, positions or tangents at given offsets.
      */
-    export class Curve {
+    export class Curve extends Base {
 
         /**
          * Creates a new curve object.
@@ -3693,11 +3727,6 @@ declare module paper {
          */
         clone(): Curve;
 
-        /**
-         * Returns a string representation of the curve
-         */
-        toString(): string;
-
         /**
          * Determines the type of cubic Bézier curve via discriminant classification, as well as the curve-time parameters of the associated points of inflection, loops, cusps, etc.
          * Returns  the curve classification information as an object
@@ -3775,7 +3804,7 @@ declare module paper {
          * Returns a reversed version of the curve, without modifying the curve itself.
          */
         reversed(): Curve;
-        
+
         /**
          * Clears the curve’s handles by setting their coordinates to zero, turning the curve into a straight line.
          */
@@ -3936,7 +3965,7 @@ declare module paper {
      * CurveLocation objects describe a location on Curve objects, as defined by the curve parameter, a value between 0 (beginning of the curve) and 1 (end of the curve). If the curve is part of a Path item, its index inside the path.curves array is also provided.
      * The class is in use in many places, such as path.getLocationAt(offset, isParameter), path.getLocationOf(point), Path#getNearestLocation(point),{@linkPathItem#getIntersections(path), etc.
      */
-    export class CurveLocation {
+    export class CurveLocation extends Base {
 
         /**
          * Creates a new CurveLocation object.
@@ -4037,11 +4066,6 @@ declare module paper {
          */
         equals(location: CurveLocation): boolean;
 
-        /**
-         * Returns a string representation of the curve location
-         */
-        toString(): string;
-
         /**
          * Checks if the location is an intersection with another curve and is merely touching the other curve, as opposed to crossing it.
          */
@@ -4064,7 +4088,7 @@ declare module paper {
      * The currently active project can be accessed through the paperScope.project variable.
      * An array of all open projects is accessible through the paperScope.projects variable.
      */
-    export class Project {
+    export class Project extends Base {
 
         /**
          * Creates a Paper.js project containing one empty Layer, referenced by project.activeLayer.
@@ -4081,7 +4105,9 @@ declare module paper {
         /**
          * The currently active path style. All selected items and newly created items will be styled with this style.
          */
-        currentStyle: Style;
+        currentStyle: Partial<Style>;
+        getCurrentStyle(): Style;
+        setCurrentStyle(value: Partial<Style>): void;
 
         /**
          * The index of the project in the paperScope.projects list.
@@ -4212,20 +4238,6 @@ declare module paper {
          */
         getItem(match: any): Item;
 
-        /**
-         * Exports (serializes) the project with all its layers and child items to a JSON data string.
-         * @param options [optional] - default {asString: true, precision: 5}
-         * @param options.asString - whether the JSON is returned as a Object or a String.
-         * @param options.precision - the amount of fractional digits in numbers used in JSON data.
-         */
-        exportJSON(options?: { asString?: boolean; precision?: number }): string;
-
-        /**
-         * Imports (deserializes) the stored JSON data into the project.
-         * Note that the project is not cleared first. You can call project.clear() to do so.
-         */
-        importJSON(json: string): void;
-
         /**
          * Exports the project with all its layers and child items as an SVG DOM, all contained in one top level SVG group node.
          * @param options [optional] the export options, default: { asString: false, precision: 5, matchShapes: false, bounds: 'view', matrix: paper.view.matrix, embedImages: true  }
@@ -4258,12 +4270,12 @@ declare module paper {
          * @param onLoad [optional] - the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted item and the original svg data as a string. Only required when loading from external resources.
          */
         importSVG(svg: SVGElement | string, onLoad?: (item: Item, svg: string) => void): Item;
-        
+
     }
     /**
      * Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don't need to be updated with every transformation.
      */
-    export class Symbol {
+    export class Symbol extends Base {
 
         /**
          * Creates a Symbol item.
@@ -4306,127 +4318,135 @@ declare module paper {
      * All properties of Style are also reflected directly in Item, i.e.: item.fillColor.
      * To set multiple style properties in one go, you can pass an object to item.style. This is a convenient way to define a style once and apply it to a series of items:
      */
-    export class Style {
+    export class Style extends Base {
 
         /**
          * The view that this style belongs to.
          * Read only.
          */
-        readonly view?: View;
+        readonly view: View;
 
         /**
          * The color of the stroke.
          */
-        strokeColor?: Color | string;
+        strokeColor: Color | string | null;
+        getStrokeColor(): Color;
+        setStrokeColor(value: Color | string | null): void;
 
         /**
          * The width of the stroke.
          * Default: 1
          */
-        strokeWidth?: number;
+        strokeWidth: number;
 
         /**
          * The shape to be used at the beginning and end of open Path items, when they have a stroke.
          * Values: 'round', 'square', 'butt'
          * Default: 'butt'
          */
-        strokeCap?: string;
+        strokeCap: string;
 
         /**
          * The shape to be used at the segments and corners of Path items when they have a stroke.
          * Values: 'miter', 'round', 'bevel'
          * Default: 'miter'
          */
-        strokeJoin?: string;
+        strokeJoin: string;
 
         /**
          * Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.
          * Default: true
          */
-        strokeScaling?: boolean;
+        strokeScaling: boolean;
 
         /**
          * The dash offset of the stroke.
          * Default: 0
          */
-        dashOffset?: number;
+        dashOffset: number;
 
         /**
          * Specifies an array containing the dash and gap lengths of the stroke.
          * Default: []
          */
-        dashArray?: number[];
+        dashArray: number[];
 
         /**
          * The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for strokeJoin, it is possible for the miter to extend far beyond the strokeWidth of the path. The miterLimit imposes a limit on the ratio of the miter length to the strokeWidth.
          * Default: 10
          */
-        miterLimit?: number;
+        miterLimit: number;
 
         /**
          * The fill color.
          */
-        fillColor?: Color | string;
+        fillColor: Color | string | null;
+        getFillColor(): Color;
+        setFillColor(value: Color | string | null): void;
 
         /**
          * The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than 'nonzero'.
          * Values: 'nonzero', 'evenodd'
          * Default: 'nonzero'
          */
-        fillRule?: string;
+        fillRule: string;
 
         /**
          * The shadow color.
          */
-        shadowColor?: Color | string;
+        shadowColor: Color | string | null;
+        getShadowColor(): Color;
+        setShadowColor(value: Color | string | null): void;
 
         /**
          * The shadow's blur radius.
          * Default: 0
          */
-        shadowBlur?: number;
+        shadowBlur: number;
 
         /**
          * The shadow's offset.
          * Default: 0
          */
-        shadowOffset?: number | number[] | {x: number, y: number} | Point;
+        shadowOffset: number | number[] | {x: number, y: number} | Point;
 
         /**
          * The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.
          */
-        selectedColor?: Color | string;
+        selectedColor: Color | string | null;
+        getSelectedColor(): Color;
+        setSelectedColor(value: Color | string | null): void;
 
         /**
          * The font-family to be used in text content.
          * Default: 'sans-serif'
          */
-        fontFamily?: string;
+        fontFamily: string;
 
         /**
          * The font-weight to be used in text content.
          * Default: 'normal'
          */
-        fontWeight?: string | number;
+        fontWeight: string | number;
 
         /**
          * The font size of text content, as {@Number} in pixels, or as {@String} with optional units 'px', 'pt' and 'em'.
          * Default: 10
          */
-        fontSize?: string | number;
+        fontSize: string | number;
 
         /**
          * The text leading of text content.
          * Default: fontSize * 1.2
          */
-        leading?: number | string;
+        leading: number | string;
 
         /**
          * The justification of text paragraphs.
          * Values: 'left', 'right', 'center'
          * Default: 'left'
          */
-        justification?: string;
+        justification: string;
 
     }
     export interface IHSBColor {
@@ -4490,7 +4510,7 @@ declare module paper {
     /**
      * All properties and functions that expect color values in the form of instances of Color objects, also accept named colors and hex values as strings which are then converted to instances of Color internally.
      */
-    export class Color {
+    export class Color extends Base {
 
         /**
          * Creates a RGB Color object.
@@ -4667,11 +4687,6 @@ declare module paper {
          */
         clone(): Color;
 
-        /**
-         * a string representation of the color
-         */
-        toString(): string;
-
         /**
          * Returns the color as a CSS string.
          * @param hex - whether to return the color in hexadecial representation or as a CSS RGB / RGBA string.
@@ -4695,7 +4710,7 @@ declare module paper {
          * @param color - the color to add
          */
         add(color: Color): Color;
-        
+
         /**
          * Returns the subtraction of the supplied value to both coordinates of the color as a new color. The object itself is not modified!
          * @param number - the number to subtract
@@ -4707,7 +4722,7 @@ declare module paper {
          * @param color - the color to subtract
          */
         subtract(color: Color): Color;
-        
+
         /**
          * Returns the multiplication of the supplied value to both coordinates of the color as a new color. The object itself is not modified!
          * @param number - the number to multiply
@@ -4736,7 +4751,7 @@ declare module paper {
     /**
      * The Gradient object.
      */
-    export class Gradient {
+    export class Gradient extends Base {
 
         /**
          * Creates a Gradient object.
@@ -4744,7 +4759,7 @@ declare module paper {
          * @param radial [optional] - Whether the gradient is radial or linear
          */
         constructor(stops?:GradientStop[] | string[] | (string|number)[][], radial?:boolean);
-        
+
         /**
          * Creates a Gradient object.
          * @param object [optional] - an object literal containing the properties to be set on the group.
@@ -4776,7 +4791,7 @@ declare module paper {
     /**
      * The GradientStop object.
      */
-    export class GradientStop {
+    export class GradientStop extends Base {
 
         /**
          * Creates a GradientStop object.
@@ -4784,7 +4799,7 @@ declare module paper {
          * @param rampPoint [optional] - the position of the stop on the gradient ramp as a value between 0 and 1, default: 0
          */
         constructor(color?: Color | string, rampPoint?: number);
-        
+
         /**
          * Creates a new GradientStop object.
          * @param object [optional] - an object literal containing the properties to be set on the group.
@@ -4811,7 +4826,9 @@ declare module paper {
         /**
          * The color of the gradient stop.
          */
-        color: Color;
+        color: Color | string;
+        getColor(): Color;
+        setColor(value: Color | string): void;
 
         /**
          * Returns a copy of the gradient-stop
@@ -4822,7 +4839,7 @@ declare module paper {
     /**
      * The View object wraps an HTML element and handles drawing and user interaction through mouse and keyboard for it. It offer means to scroll the view, find the currently visible bounds in project coordinates, or the center, both useful for constructing artwork that should appear centered on screen.
      */
-    export class View {
+    export class View extends Base {
 
         /**
          * Controls whether the view is automatically updated in the next animation frame on changes, or whether you prefer to manually call update() or requestUpdate() after changes. Note that this is true by default, except for Node.js, where manual updates make more sense.
@@ -5098,7 +5115,7 @@ declare module paper {
          * Detach an event handler from the view.
          * @param type - the event type: ‘frame’, ‘resize’, ‘mousedown’, ‘mouseup’, ‘mousedrag’, ‘click’, ‘doubleclick’, ‘mousemove’, ‘mouseenter’, ‘mouseleave’
          * @param callback - The function to be detached
-         */       
+         */
         off(type: string, callback: (event: IFrameEvent) => void | boolean): Item;
 
         /**
@@ -5130,7 +5147,7 @@ declare module paper {
      * The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global tool variable. All its properties are also available in the paper scope.
      * The global tool variable only exists in scripts that contain mouse handler functions (onMouseMove, onMouseDown, onMouseDrag, onMouseUp) or a keyboard handler function (onKeyDown, onKeyUp).
      */
-    export class Tool {
+    export class Tool extends Base {
 
         /**
          * The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.
@@ -5231,7 +5248,7 @@ declare module paper {
         responds(type: string): boolean;
 
     }
-    export class Event {
+    export class Event extends Base {
 
         /**
          * The time at which the event was created, in milliseconds since the epoch.
@@ -5308,16 +5325,11 @@ declare module paper {
          */
         item: Item;
 
-        /**
-         * a string representation of the tool event
-         */
-        toString(): string;
-
     }
     export class Key {
 
         /**
-         * 
+         *
          * The current state of the keyboard modifiers.
          *   modifiers.shift - true if the shift key is pressed, false otherwise.
          *   modifiers.control - true if the control key is pressed, false otherwise.
@@ -5358,11 +5370,6 @@ declare module paper {
          */
         key: string;
 
-        /**
-         * a string representation of the key event
-         */
-        toString(): string;
-
     }
     /**
      * The TextItem type allows you to create typography. Its functionality is inherited by different text item types such as PointText, and AreaText (coming soon). They each add a layer of functionality that is unique to their type, but share the underlying properties and functions that they inherit from TextItem.
@@ -5487,8 +5494,8 @@ declare module paper {
         type: 'mousedown' | 'mouseup' | 'mousedrag' | 'click' | 'doubleclick' | 'mousemove' | 'mouseenter' | 'mouseleave';
 
     }
-	
-	export interface Settings {
+
+    export interface Settings {
         /**
          * controls whether newly created items are automatically inserted into the scene graph, by adding them to project.activeLayer — default: true
          */
diff --git a/types/paper/paper-tests.ts b/types/paper/paper-tests.ts
index 280b68c0e9..78e6b2c4b5 100644
--- a/types/paper/paper-tests.ts
+++ b/types/paper/paper-tests.ts
@@ -93,16 +93,16 @@ function Examples() {
             justification: 'center',
             fontSize: 20
         });
-        
+
         let originals = new paper.Group({ insert: false }); // Don't insert in DOM.
-        
+
         let square = new paper.Path.Rectangle({
             position: paper.view.center,
             size: 300,
             parent: originals,
             fillColor: 'white'
         });
-        
+
         // Make a ring using subtraction of two circles:
         let inner = new paper.Path.Circle({
             center: paper.view.center,
@@ -110,62 +110,62 @@ function Examples() {
             parent: originals,
             fillColor: 'white'
         });
-        
+
         let outer = new paper.Path.Circle({
             center: paper.view.center,
             radius: 140,
             parent: originals,
             fillColor: 'white'
         });
-        
+
         let ring = outer.subtract(inner);
-        
+
         let operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
         let colors = ['red', 'green', 'blue', 'black'];
         let curIndex = -1;
         let operation: string;
         let result: paper.PathItem | null;
         let activeItem: paper.PathItem | null;
-        
+
         // Change the mode every 3 seconds:
         setInterval(setMode, 3000);
-        
+
         // Set the initial mode:
         setMode();
-        
+
         function setMode() {
             curIndex++;
             if (curIndex == operations.length * 2)
                 curIndex = 0;
             operation = operations[curIndex % operations.length];
         }
-        
+
         function onMouseDown(event: paper.ToolEvent) {
             let hitResult = originals.hitTest(event.point);
             activeItem = hitResult && hitResult.item as paper.PathItem;
         }
-        
+
         function onMouseDrag(event: paper.ToolEvent) {
             if (activeItem)
                 activeItem.position = event.point;
         }
-        
+
         function onMouseUp() {
             activeItem = null;
             square.position = paper.view.center;
         }
-        
+
         function onFrame(event: paper.IFrameEvent) {
             if (activeItem != ring) {
                 // Move the ring around:
                 let offset = new paper.Point(140, 80).multiply(new paper.Point([Math.sin(event.count / 60), Math.sin(event.count / 40)]));
                 ring.position = paper.view.center.add(offset);
             }
-        
+
             // Remove the result of the last path operation:
             if (result)
                 result.remove();
-        
+
             function performOperation(operation:string, primaryItem:paper.PathItem, secondaryItem:paper.PathItem){
                 switch(operation){
                     case 'unite':
@@ -195,7 +195,7 @@ function Examples() {
                 result.fillColor = colors[curIndex % colors.length];
                 result.moveBelow(text);
             }
-        
+
             // If the result is a group, color each of its children differently:
             if (result instanceof paper.Group) {
                 for (let i = 0; i < result.children.length; i++) {
@@ -203,7 +203,7 @@ function Examples() {
                 }
             }
         };
-        
+
         function onResize() {
             text.position = paper.view.center.add(new paper.Point([0, 200]));
             square.position = paper.view.center;
@@ -345,28 +345,28 @@ function Examples() {
             for (let i = 0, l = balls.length; i < l; i++) {
                 balls[i].iterate();
             }
-        }    
+        }
     }
-    function SatieLikedToDraw(){        
+    function SatieLikedToDraw(){
         let leftPath = new paper.Path({
             strokeColor: 'red',
             opacity: 0.5
         });
-        
+
         let rightPath = new paper.Path({
             strokeColor: 'green',
             opacity: 0.5
         });
-        
+
         let amount = 8;
         let step = paper.view.size.width / (amount + 1);
         let flip = true;
-        
+
         for (let i = 0; i <= amount; i++) {
             leftPath.add(new paper.Point(i * step, 0));
             rightPath.add(new paper.Point(i * step, 0));
         }
-        
+
         let group = new paper.Group({
             children: [leftPath, rightPath],
             transformContent: false,
@@ -376,22 +376,22 @@ function Examples() {
             pivot: leftPath.position,
             position: paper.view.center
         });
-        
+
         function onMouseDown() {
             flip = !flip;
         }
-        
+
         function onKeyDown(event: paper.KeyEvent) {
             if (event.key === 'space')
                 group.fullySelected = !group.fullySelected;
         }
-        
+
         let audio: any;
-        let source: AudioBufferSourceNode; 
+        let source: AudioBufferSourceNode;
         let analyserL: AnalyserNode;
         let analyserR: AnalyserNode;
         let freqByteData: Uint8Array;
-        
+
         paper.view.onFrame = function() {
             let step = paper.view.size.width / (amount + 1);
             let scale = paper.view.size.height / 1.75;
@@ -408,10 +408,10 @@ function Examples() {
             group.pivot = new paper.Point([leftPath.position.x, 0]);
             group.position = paper.view.center;
         }
-        
+
         // Pause animation until we have data
         paper.view.pause();
-        
+
         let AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
         if (AudioContext) {
             audio = new AudioContext();
@@ -438,14 +438,14 @@ function Examples() {
             // TODO: Print error message
             alert('Audio not supported');
         }
-        
+
         function loadAudioBuffer(url: string) {
             // Load asynchronously
             let request = new XMLHttpRequest();
             request.open("GET", url, true);
             request.responseType = "arraybuffer";
-        
-            request.onload = function() { 
+
+            request.onload = function() {
                 audio.decodeAudioData(
                     request.response,
                     function(buffer: AudioBuffer) {
@@ -454,7 +454,7 @@ function Examples() {
                         source.start(0);
                         paper.view.play();
                     },
-                    
+
                     function() {
                         alert("Error loading MP3");
                     }
@@ -462,7 +462,7 @@ function Examples() {
             };
             request.send();
         }
-        
+
         function getEqualizerBands(data:Uint8Array) {
             let bands:number[] = [];
             let amount = Math.sqrt(data.length) / 2;
@@ -976,7 +976,7 @@ function Examples() {
         let mousePoint = paper.view.center;
         let amount = 25;
         let colors = ['red', 'white', 'blue', 'white'];
-        
+
         for (let i = 0; i < amount; i++) {
             let rect = new paper.Rectangle(new paper.Point([0, 0]), new paper.Point([25, 25]));
             rect.center = mousePoint;
@@ -985,11 +985,11 @@ function Examples() {
             let scale = (1 - i / amount) * 20;
             path.scale(scale);
         }
-        
+
         function onMouseMove(event: paper.ToolEvent) {
             mousePoint = event.point;
         }
-        
+
         let children = paper.project.activeLayer.children;
         function onFrame(event: paper.IFrameEvent) {
             for (let i = 0, l = children.length; i < l; i++) {
@@ -1056,7 +1056,7 @@ function Examples() {
         function onFrame() {
             if(gradient){
                 for (let i = 0, l = gradient.stops.length; i < l; i++)
-                    gradient.stops[i].color.hue -= 20;
+                    gradient.stops[i].getColor().hue -= 20;
                 if (grow && vector.length > 300) {
                     grow = false;
                 } else if (!grow && vector.length < 75) {
@@ -1084,9 +1084,9 @@ function Examples() {
     function MetaBalls(){
         // Ported from original Metaball script by SATO Hiroyuki
         // http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
-        paper.project.currentStyle = {
+        paper.project.setCurrentStyle({
             fillColor: 'black'
-        };
+        });
 
         let ballPositions = [[255, 129], [610, 73], [486, 363],
             [117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
@@ -1280,7 +1280,7 @@ function Examples() {
         }
         function createPath(points: paper.Point[], center: paper.Point) {
             let path = new paper.Path();
-            if (!selected) { 
+            if (!selected) {
                 path.fillColor = spotColor;
             } else {
                 path.fullySelected = selected;
@@ -1353,7 +1353,7 @@ function Examples() {
             b: SpringPoint;
             restLength: number;
             strength: number;
-            mamb: number;            
+            mamb: number;
 
             constructor(a:SpringPoint, b:SpringPoint, strength:number, restLength:number=0){
                 this.a = a;
@@ -1918,16 +1918,16 @@ function Examples() {
             minRadius: 30,
             maxRadius: 90
         };
-        
+
         let hitOptions = {
             segments: true,
             stroke: true,
             fill: true,
             tolerance: 5
         };
-        
+
         createPaths();
-        
+
         function createPaths() {
             let radiusDelta = values.maxRadius - values.minRadius;
             let pointsDelta = values.maxPoints - values.minPoints;
@@ -1941,7 +1941,7 @@ function Examples() {
                 path.strokeColor = 'black';
             };
         }
-        
+
         function createBlob(center:paper.Point, maxRadius:number, points:number) {
             let path = new paper.Path();
             path.closed = true;
@@ -1955,7 +1955,7 @@ function Examples() {
             path.smooth();
             return path;
         }
-        
+
         let segment:paper.Segment | null;
         let path:paper.Path | null;
         let movePath = false;
@@ -1964,14 +1964,14 @@ function Examples() {
             let hitResult = paper.project.hitTest(event.point, hitOptions);
             if (!hitResult)
                 return;
-        
+
             if (event.modifiers.shift) {
                 if (hitResult.type == 'segment') {
                     hitResult.segment.remove();
                 };
                 return;
             }
-        
+
             if (hitResult) {
                 path = hitResult.item as paper.Path;
                 if (hitResult.type == 'segment') {
@@ -1986,13 +1986,13 @@ function Examples() {
             if (movePath)
                 paper.project.activeLayer.addChild(hitResult.item);
         }
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             paper.project.activeLayer.selected = false;
             if (event.item)
                 event.item.selected = true;
         }
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             if (segment) {
                 segment.point= segment.point.add(event.delta);
@@ -2023,16 +2023,16 @@ function Examples() {
                 this.dampen = 0.4;
                 this.gravity = 3;
                 this.bounce = -0.6;
-            
+
                 let color = new paper.Color({
                     hue: Math.random() * 360,
                     saturation: 1,
                     brightness: 1
                 });
                 let gradient = new paper.Gradient([new paper.GradientStop(color), new paper.GradientStop(new paper.Color('black'))], true);
-            
+
                 let radius = this.radius = 50 * Math.random() + 30;
-                // Wrap CompoundPath in a Group, since CompoundPaths directly 
+                // Wrap CompoundPath in a Group, since CompoundPaths directly
                 // applies the transformations to the content, just like Path.
                 let ball = new paper.CompoundPath({
                     children: [
@@ -2046,7 +2046,7 @@ function Examples() {
                     ],
                     fillColor: new paper.Color(gradient, new paper.Point([0]), new paper.Point([radius]), new paper.Point([radius / 8])),
                 });
-            
+
                 this.item = new paper.Group({
                     children: [ball],
                     transformContent: false,
@@ -2065,13 +2065,13 @@ function Examples() {
                         this.vector = paper.Point.random().multiply(new paper.Point([150, 100]).add(new paper.Point([-75, 20])));
                     this.vector.y *= this.bounce;
                 }
-            
+
                 let max = paper.Point.max(new paper.Point([this.radius]), this.point.add(this.vector));
                 this.item.position = this.point = paper.Point.min(max, new paper.Point(size).subtract(this.radius));
                 this.item.rotate(this.vector.x);
             }
-        }        
-        
+        }
+
         let balls:Ball[] = [];
         for (let i = 0; i < 10; i++) {
             let position = paper.Point.random().multiply(new paper.Point(paper.view.size));
@@ -2079,18 +2079,18 @@ function Examples() {
             let ball = new Ball(position, vector);
             balls.push(ball);
         }
-        
+
         let textItem = new paper.PointText({
             point: [20, 30],
             fillColor: 'black',
             content: 'Click, drag and release to add balls.'
         });
-        
+
         let lastDelta:paper.Point|null;
         function onMouseDrag(event:paper.ToolEvent) {
             lastDelta = event.delta;
         }
-        
+
         function onMouseUp(event:paper.ToolEvent) {
             if(lastDelta){
                 let ball = new Ball(event.point, lastDelta);
@@ -2098,7 +2098,7 @@ function Examples() {
             }
             lastDelta = null;
         }
-        
+
         function onFrame() {
             for (let i = 0, l = balls.length; i < l; i++)
                 balls[i].iterate();
@@ -2108,76 +2108,76 @@ function Examples() {
 
 function APIReferenceExamples() {
     function Color0() {
-    
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30.
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Pass a color name to the fillColor property, which is internally
         // converted to a Color.
         circle.fillColor = 'green';
-    
+
     }
     function Color1() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30.
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Pass a hex string to the fillColor property, which is internally
         // converted to a Color.
         circle.fillColor = '#ff0000';
-    
+
     }
     function Color2() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // 100% red, 0% blue, 50% blue:
         circle.fillColor = new paper.Color(1, 0, 0.5);
-    
+
     }
     function Color3() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Create a GrayColor with 50% gray:
         circle.fillColor = new paper.Color(0.5);
-    
+
     }
     function Color4() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Create an HSB Color with a hue of 90 degrees, a saturation
         // 100% and a brightness of 100%:
         circle.fillColor = new paper.Color({ hue: 90, saturation: 1, brightness: 1 });
-    
+
     }
     function Color5() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Create an HSL Color with a hue of 90 degrees, a saturation
         // 100% and a lightness of 50%:
         circle.fillColor = new paper.Color({ hue: 90, saturation: 1, lightness: 0.5 });
-    
+
     }
     function Color6() {
-        
+
         // Define two points which we will be using to construct
         // the path and to position the gradient color:
         let topLeft = paper.view.center.subtract(new paper.Point([80, 80]));
         let bottomRight = paper.view.center.add(new paper.Point([80, 80]));
-        
+
         let path = new paper.Path.Rectangle({
          topLeft: topLeft,
          bottomRight: bottomRight,
@@ -2189,40 +2189,40 @@ function APIReferenceExamples() {
              destination: bottomRight
          }
         });
-    
+
     }
     function Color7() {
-        
+
         // Define two points which we will be using to construct
         // the path and to position the gradient color:
         let topLeft = paper.view.center.subtract(new paper.Point([80, 80]));
         let bottomRight = paper.view.center.add(new paper.Point([80, 80]));
-        
+
         // Create a rectangle shaped path between
         // the topLeft and bottomRight points:
         let path = new paper.Path.Rectangle(topLeft, bottomRight);
-        
+
         // Create the gradient, passing it an array of colors to be converted
         // to evenly distributed color stops:
         let gradient = new paper.Gradient(['yellow','red','blue']);
-        
+
         // Have the gradient color run between the topLeft and
         // bottomRight points we defined earlier:
         let gradientColor = new paper.Color(gradient, topLeft, bottomRight);
-        
+
         // Set the fill color of the path to the gradient color:
         path.fillColor = gradientColor;
-    
+
     }
     function Color8() {
-        
+
         // Create a circle shaped path at the center of the paper.view
         // with a radius of 80:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 80
         });
-        
+
         // The stops array: yellow mixes with red between 0 and 15%,
         // 15% to 30% is pure red, red mixes with black between 30% to 100%:
         let stops = [
@@ -2231,114 +2231,114 @@ function APIReferenceExamples() {
             ['red', 0.3],
             ['black', 0.9]
         ];
-        
+
         // Create a radial gradient using the color stops array:
         let gradient = new paper.Gradient(stops, true);
-        
+
         // We will use the center point of the circle shaped path as
         // the origin point for our gradient color
         let from = path.position;
-        
+
         // The destination point of the gradient color will be the
         // center point of the path + 80pt in horizontal direction:
         let to = path.position.add(new paper.Point([80, 0]));
-        
+
         // Create the gradient color:
         let gradientColor = new paper.Color(gradient, from, to);
-        
+
         // Set the fill color of the path to the gradient color:
         path.fillColor = gradientColor;
-    
+
     }
     function Color9() {
-        
+
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // Fill the circle with red and give it a 20pt green stroke:
-        circle.style = {
+        circle.setStyle({
          fillColor: 'red',
          strokeColor: 'green',
          strokeWidth: 20
-        };
-        
+        });
+
         // Make the stroke half transparent:
         (circle.strokeColor as paper.Color).alpha = 0.5;
-    
+
     }
     function Color10() {
-        
+
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
         circle.fillColor = new paper.Color('blue');
-        
+
         // Blue + red = purple:
         circle.fillColor.red = 1;
-    
+
     }
     function Color11() {
-        
+
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // First we set the fill color to red:
         circle.fillColor = new paper.Color('red');
-        
+
         // Red + green = yellow:
         circle.fillColor.green = 1;
-    
+
     }
     function Color12() {
-        
+
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         // First we set the fill color to red:
         circle.fillColor = new paper.Color('red');
-        
+
         // Red + blue = purple:
         circle.fillColor.blue = 1;
-    
+
     }
     function Color13() {
-        
+
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
         circle.fillColor = new paper.Color('red');
         circle.fillColor.hue += 30;
-    
+
     }
     function Color14() {
-        
+
         // Create a rectangle shaped path, using the dimensions
         // of the paper.view:
         let path = new paper.Path.Rectangle(paper.view.bounds);
         path.fillColor = new paper.Color('red');
-        
+
         function onFrame(event:paper.IFrameEvent) {
          (path.fillColor as paper.Color).hue += 0.5;
         }
-    
+
     }
     function Color15() {
-        
+
         let path = new paper.Path.Circle({
          center: paper.view.center,
          radius: paper.view.bounds.height * 0.4
         });
-        
-        path.fillColor = new paper.Color({ 
-            gradient: new paper.Gradient({ 
-                stops: ['yellow', 'red', 'black'], 
+
+        path.fillColor = new paper.Color({
+            gradient: new paper.Gradient({
+                stops: ['yellow', 'red', 'black'],
                 radial: true }),
-            origin: path.position, 
+            origin: path.position,
             destination: path.bounds.rightCenter
         });
-        
+
         function onMouseMove(event:paper.ToolEvent) {
          // Set the origin highlight of the path's gradient color
          // to the position of the mouse:
          (path.fillColor as paper.Color).highlight = event.point;
         }
-    
+
     }
     function CompoundPath0() {
-        
+
         let path = new paper.CompoundPath({
             children: [
                 new paper.Path.Circle({
@@ -2353,34 +2353,34 @@ function APIReferenceExamples() {
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function CompoundPath1() {
-        
+
         let pathData = 'M20,50c0,-16.56854 13.43146,-30 30,-30c16.56854,0 30,13.43146 30,30c0,16.56854 -13.43146,30 -30,30c-16.56854,0 -30,-13.43146 -30,-30z M50,60c5.52285,0 10,-4.47715 10,-10c0,-5.52285 -4.47715,-10 -10,-10c-5.52285,0 -10,4.47715 -10,10c0,5.52285 4.47715,10 10,10z';
         let path = new paper.CompoundPath(pathData);
         path.fillColor = 'black';
-    
+
     }
     function CompoundPath2() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function CompoundPath3() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -2390,89 +2390,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function CompoundPath4() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function CompoundPath5() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function CompoundPath6() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function CompoundPath7() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function CompoundPath8() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -2480,110 +2480,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function CompoundPath9() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function CompoundPath10() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function CompoundPath11() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function CompoundPath12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function CompoundPath13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function CompoundPath14() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function CompoundPath15() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function CompoundPath16() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -2591,36 +2591,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function CompoundPath17() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function CompoundPath18() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -2628,44 +2628,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function CompoundPath19() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function CompoundPath20() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function CompoundPath21() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -2677,39 +2677,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function CompoundPath22() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function CompoundPath23() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function CompoundPath24() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -2720,63 +2720,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function CompoundPath25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function CompoundPath26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function CompoundPath27() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function CompoundPath28() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -2787,32 +2787,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function CompoundPath29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function CompoundPath30() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -2823,142 +2823,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function CompoundPath31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function CompoundPath32() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function CompoundPath33() {
-        
+
         function enter(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function CompoundPath34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function CompoundPath35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function CompoundPath36() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function CompoundPath37() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function CompoundPath38() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -2966,7 +2966,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -2978,28 +2978,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function CompoundPath39() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function CompoundPath40() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -3007,16 +3007,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function CompoundPath41() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -3024,13 +3024,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function CompoundPath42() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -3038,13 +3038,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function CompoundPath43() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -3052,13 +3052,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function CompoundPath44() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -3066,7 +3066,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -3074,14 +3074,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function CompoundPath45() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -3089,7 +3089,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -3097,53 +3097,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function CompoundPath46() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function CompoundPath47() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function CompoundPath48() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Item, event:paper.MouseEvent) {
@@ -3153,10 +3153,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function CompoundPath49() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Item, event:paper.MouseEvent) {
                 this.fillColor = 'red';
@@ -3165,7 +3165,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -3174,14 +3174,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function CompoundPath50() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -3190,17 +3190,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function CompoundPath51() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -3209,14 +3209,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function CompoundPath52() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -3225,14 +3225,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function CompoundPath53() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -3241,14 +3241,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function CompoundPath54() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -3257,26 +3257,26 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function CompoundPath55() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(30, 25), new paper.Size(50, 50));
         path.strokeColor = 'black';
-        
+
         let secondPath = path.clone();
         let intersectionGroup = new paper.Group();
-        
+
         function onFrame(event:paper.IFrameEvent) {
             secondPath.rotate(1);
-        
+
             let intersections = path.getIntersections(secondPath);
             intersectionGroup.removeChildren();
-        
+
             for (let i = 0; i < intersections.length; i++) {
                 let intersectionPath = new paper.Path.Circle({
                     center: intersections[i].point,
@@ -3286,10 +3286,10 @@ function APIReferenceExamples() {
                 });
             }
         }
-    
+
     }
     function CompoundPath56() {
-        
+
         let star = new paper.Path.Star({
             center: paper.view.center,
             points: 10,
@@ -3297,45 +3297,45 @@ function APIReferenceExamples() {
             radius2: 60,
             strokeColor: 'black'
         });
-        
+
         let circle = new paper.Path.Circle({
             center: paper.view.center,
             radius: 3,
             fillColor: 'red'
         });
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Get the nearest point from the mouse position
             // to the star shaped path:
             let nearestPoint = star.getNearestPoint(event.point);
-        
+
             // Move the red circle to the nearest point:
             circle.position = nearestPoint;
         }
-    
+
     }
     function CompoundPath57() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Select the path, so we can inspect its segments:
         path.selected = true;
-        
+
         // Create a copy of the path and move it by 150 points:
         let copy = path.clone();
         copy.position.x += 150;
-        
+
         // Flatten the copied path, with a maximum error of 4 points:
         copy.flatten(4);
-    
+
     }
     function CompoundPath58() {
-        
+
         // Create a rectangular path with its top-left point at
         // {x: 30, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -3343,47 +3343,47 @@ function APIReferenceExamples() {
             size: [50, 50],
             strokeColor: 'black',
         });
-        
+
         // Select the path, so we can see its handles:
         path.fullySelected = true;
-        
+
         // Create a copy of the path and move it 100 to the right:
         let copy = path.clone();
         copy.position.x += 100;
-        
+
         // Smooth the segments of the copy:
         copy.smooth({ type: 'continuous' });
-    
+
     }
     function CompoundPath59() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 50));
-        
+
         let y = 5;
         let x = 3;
-        
+
         for (let i = 0; i < 28; i++) {
             y *= -1.1;
             x *= 1.1;
             path.lineBy(new paper.Point(x, y));
         }
-        
+
         // Create a copy of the path and move it 100 down:
         let copy = path.clone();
         copy.position.y += 120;
-        
+
         // Select the path, so we can see its handles:
         copy.fullySelected = true;
-        
+
         // Smooth the path using centripetal Catmull-Rom splines:
         copy.smooth({ type: 'catmull-rom', factor: 0.5 });
-    
+
     }
     function CompoundPath60() {
-        
+
         // Create 5 rectangles, next to each other:
         let paths:paper.Path[] = [];
         for (let i = 0; i < 5; i++) {
@@ -3399,30 +3399,30 @@ function APIReferenceExamples() {
             from: paths[1].segments[0],
             to: paths[1].segments[2]
         });
-        
+
         // Smooth a range, using curves:
         paths[2].smooth({
             type: 'continuous',
             from: paths[2].curves[0],
             to: paths[2].curves[1]
         });
-        
+
         // Smooth a range, using indices:
         paths[3].smooth({ type: 'continuous', from: 0, to: 2 });
-        
+
         // Smooth a range, using negative indices:
         paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
-    
+
     }
     function CompoundPath61() {
-        
+
         let path: paper.Path | null;
         function onMouseDown(event:paper.ToolEvent) {
             // If we already made a path before, deselect it:
             if (path) {
                 path.selected = false;
             }
-        
+
             // Create a new path and add the position of the mouse
             // as its first segment. Select it, so we can see the
             // segment points:
@@ -3432,7 +3432,7 @@ function APIReferenceExamples() {
                 selected: true
             });
         }
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // On every drag event, add a segment to the path
             // at the position of the mouse:
@@ -3440,7 +3440,7 @@ function APIReferenceExamples() {
                 path.add(event.point);
             }
         }
-        
+
         function onMouseUp(event:paper.ToolEvent) {
             // When the mouse is released, simplify the path:
             if(path){
@@ -3448,52 +3448,52 @@ function APIReferenceExamples() {
                 path.selected = true;
             }
         }
-    
+
     }
     function CompoundPath62() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         let firstPoint = new paper.Point(30, 75);
         path.add(firstPoint);
-        
+
         // The point through which we will create the arc:
         let throughPoint = new paper.Point(40, 40);
-        
+
         // The point at which the arc will end:
         let toPoint = new paper.Point(130, 75);
-        
+
         // Draw an arc through 'throughPoint' to 'toPoint'
         path.arcTo(throughPoint, toPoint);
-        
+
         // Add a red circle shaped path at the position of 'throughPoint':
         let circle = new paper.Path.Circle(throughPoint, 3);
         circle.fillColor = 'red';
-    
+
     }
     function CompoundPath63() {
-        
+
         let myPath: paper.Path | null;
         function onMouseDrag(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw an arc through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.arcTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-        
+
         // When the mouse is released, deselect the path
         // and fill it with black.
         function onMouseUp(event:paper.ToolEvent) {
@@ -3502,33 +3502,33 @@ function APIReferenceExamples() {
                 myPath.fillColor = 'black';
             }
         }
-    
+
     }
     function CompoundPath64() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 75));
         path.arcTo(new paper.Point(130, 75));
-        
+
         let path2 = new paper.Path();
         path2.strokeColor = 'red';
         path2.add(new paper.Point(180, 25));
-        
+
         // To draw an arc in anticlockwise direction,
         // we pass `false` as the second argument to arcTo:
         path2.arcTo(new paper.Point(280, 25), false);
-    
+
     }
     function CompoundPath65() {
-        
+
         let myPath:paper.Path;
-        
+
         // The mouse has to move at least 20 points before
         // the next mouse drag event is fired:
         paper.tool.minDistance = 20;
-        
+
         // When the user clicks, create a new path and add
         // the current mouse position to it as its first segment:
         function onMouseDown(event:paper.ToolEvent) {
@@ -3536,61 +3536,61 @@ function APIReferenceExamples() {
             myPath.strokeColor = 'black';
             myPath.add(event.point);
         }
-        
+
         // On each mouse drag event, draw an arc to the current
         // position of the mouse:
         function onMouseDrag(event:paper.ToolEvent) {
             myPath.arcTo(event.point);
         }
-    
+
     }
     function CompoundPath66() {
-        
+
         let myPath: paper.Path | null;
         function onMouseMove(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw a curve through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.curveTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-    
+
     }
     function CompoundPath67() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add a segment at {x: 50, y: 50}
         path.add(new paper.Point(25, 25));
-        
+
         // Add a segment relative to the last segment of the path.
         // 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
         path.lineBy(new paper.Point(50, 0));
-        
+
         // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
         path.lineBy(new paper.Point(0, 50));
-    
+
     }
     function CompoundPath68() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add the first segment at {x: 50, y: 50}
         path.add(paper.view.center);
-        
+
         // Loop 500 times:
         for (let i = 0; i < 500; i++) {
             // Create a vector with an ever increasing length
@@ -3602,22 +3602,22 @@ function APIReferenceExamples() {
             // Add the vector relatively to the last segment point:
             path.lineBy(vector);
         }
-        
+
         // Smooth the handles of the path:
         path.smooth();
-        
+
         // Uncomment the following line and click on 'run' to see
         // the construction of the path:
         // path.selected = true;
-    
+
     }
     function Gradient0() {
-        
+
         // Define two points which we will be using to construct
         // the path and to position the gradient color:
         let topLeft = paper.view.center.subtract(new paper.Point([80, 80]));
         let bottomRight = paper.view.center.add(new paper.Point([80, 80]));
-        
+
         // Create a rectangle shaped path between
         // the topLeft and bottomRight points:
         let path = new paper.Path.Rectangle({
@@ -3633,15 +3633,15 @@ function APIReferenceExamples() {
                 destination: bottomRight
             }
         });
-    
+
     }
     function Gradient1() {
-        
+
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: paper.view.bounds.height * 0.4
         });
-        
+
         // Fill the path with a radial gradient color with three stops:
         // yellow from 0% to 5%, mix between red from 5% to 20%,
         // mix between red and black from 20% to 100%:
@@ -3653,10 +3653,10 @@ function APIReferenceExamples() {
             origin: path.position,
             destination: path.bounds.rightCenter
         });
-    
+
     }
     function GradientStop0() {
-        
+
         // Create a circle shaped path at the center of the paper.view,
         // using 40% of the height of the paper.view as its radius
         // and fill it with a radial gradient color:
@@ -3664,7 +3664,7 @@ function APIReferenceExamples() {
             center: paper.view.center,
             radius: paper.view.bounds.height * 0.4
         });
-        
+
         path.fillColor = new paper.Color({
             gradient: new paper.Gradient({
                 stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
@@ -3673,25 +3673,25 @@ function APIReferenceExamples() {
             origin: path.position,
             destination: path.bounds.rightCenter
         });
-        
+
         let gradient = path.fillColor.gradient;
-        
+
         // This function is called each frame of the animation:
         function onFrame(event:paper.IFrameEvent) {
             if(gradient){
                 let blackStop = gradient.stops[2];
                 // Animate the offset between 0.7 and 0.9:
                 blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
-            
+
                 // Animate the offset between 0.2 and 0.4
                 let redStop = gradient.stops[1];
                 redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
             }
         }
-    
+
     }
     function GradientStop1() {
-        
+
         // Create a circle shaped path at the center of the paper.view,
         // using 40% of the height of the paper.view as its radius
         // and fill it with a radial gradient color:
@@ -3699,7 +3699,7 @@ function APIReferenceExamples() {
             center: paper.view.center,
             radius: paper.view.bounds.height * 0.4
         });
-        
+
         path.fillColor = new paper.Color({
             gradient: new paper.Gradient({
                 stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
@@ -3708,65 +3708,65 @@ function APIReferenceExamples() {
             origin: path.position,
             destination: path.bounds.rightCenter
         });
-        
+
         let redStop:paper.GradientStop;
         let blackStop:paper.GradientStop;
         if(path.fillColor.gradient){
             redStop = path.fillColor.gradient.stops[1];
             blackStop = path.fillColor.gradient.stops[2];
         }
-        
+
         // This function is called each frame of the animation:
         function onFrame(event:paper.IFrameEvent) {
             // Animate the offset between 0.7 and 0.9:
             blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
-        
+
             // Animate the offset between 0.2 and 0.4
             redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
         }
-    
+
     }
     function Group0() {
-        
+
         let path = new paper.Path([new paper.Point([100, 100]), new paper.Point([100, 200])]);
         let path2 = new paper.Path([new paper.Point([50, 150]), new paper.Point([150, 150])]);
-        
+
         // Create a group from the two paths:
         let group = new paper.Group([path, path2]);
-        
+
         // Set the stroke color of all items in the group:
         group.strokeColor = 'black';
-        
+
         // Move the group to the center of the paper.view:
         group.position = paper.view.center;
-    
+
     }
     function Group1() {
-        
+
         let group = new paper.Group();
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a new circle shaped path at the position
             // of the mouse:
             let path = new paper.Path.Circle(event.point, 5);
             path.fillColor = 'black';
-        
+
             // Add the path to the group's children list:
             group.addChild(path);
         }
-        
+
         function onFrame(event:paper.IFrameEvent) {
             // Rotate the group by 1 degree from
             // the centerpoint of the paper.view:
             group.rotate(1, paper.view.center);
         }
-    
+
     }
     function Group2() {
-        
+
         let path = new paper.Path([new paper.Point([100, 100]), new paper.Point([100, 200])]);
         let path2 = new paper.Path([new paper.Point([50, 150]), new paper.Point([150, 150])]);
-        
+
         // Create a group from the two paths:
         let group = new paper.Group({
             children: [path, path2],
@@ -3775,10 +3775,10 @@ function APIReferenceExamples() {
             // Move the group to the center of the paper.view:
             position: paper.view.center
         });
-    
+
     }
     function Group3() {
-        
+
         let star = new paper.Path.Star({
             center: paper.view.center,
             points: 6,
@@ -3786,43 +3786,43 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'red'
         });
-        
+
         let circle = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             strokeColor: 'black'
         });
-        
+
         // Create a group of the two items and clip it:
         let group = new paper.Group([circle, star]);
         group.clipped = true;
-        
+
         // Lets animate the circle:
         function onFrame(event:paper.IFrameEvent) {
             let offset = Math.sin(event.count / 30) * 30;
             circle.position.x = paper.view.center.x + offset;
         }
-    
+
     }
     function Group4() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Group5() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -3832,89 +3832,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Group6() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Group7() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Group8() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Group9() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Group10() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -3922,110 +3922,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Group11() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Group12() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Group13() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Group14() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Group15() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Group16() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Group17() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Group18() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -4033,36 +4033,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Group19() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Group20() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -4070,44 +4070,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Group21() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Group22() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Group23() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -4119,39 +4119,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Group24() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Group25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Group26() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -4162,63 +4162,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Group27() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Group28() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Group29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Group30() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -4229,32 +4229,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Group31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Group32() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -4265,142 +4265,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Group33() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Group34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Group35() {
-        
+
         function enter(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Group36() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Group37() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Group38() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Group39() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Group40() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -4408,7 +4408,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -4420,28 +4420,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Group41() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Group42() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -4449,16 +4449,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Group43() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -4466,13 +4466,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Group44() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -4480,13 +4480,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Group45() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -4494,13 +4494,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Group46() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -4508,7 +4508,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -4516,14 +4516,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Group47() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -4531,7 +4531,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -4539,53 +4539,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Group48() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Group49() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Group50() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path, event:paper.MouseEvent) {
@@ -4595,10 +4595,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Group51() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path, event:paper.MouseEvent) {
                 this.fillColor = 'red';
@@ -4607,7 +4607,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -4616,14 +4616,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Group52() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -4632,17 +4632,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Group53() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -4651,14 +4651,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Group54() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -4667,14 +4667,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Group55() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -4683,14 +4683,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Group56() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -4699,31 +4699,31 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Item0() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Item1() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -4733,89 +4733,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Item2() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Item3() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Item4() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Item5() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Item6() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -4823,110 +4823,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Item7() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Item8() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Item9() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Item10() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Item11() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Item12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Item13() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Item14() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -4934,36 +4934,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Item15() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Item16() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -4971,44 +4971,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Item17() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Item18() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Item19() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -5020,39 +5020,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Item20() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Item21() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Item22() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -5063,63 +5063,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Item23() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Item24() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Item25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Item26() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -5130,32 +5130,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Item27() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Item28() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -5166,142 +5166,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Item29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Item30() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Item31() {
-        
+
         function enter(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Item32() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Item33() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Item34() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Item35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Item36() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -5309,7 +5309,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -5321,28 +5321,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Item37() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Item38() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -5350,16 +5350,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Item39() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -5367,13 +5367,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Item40() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -5381,13 +5381,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Item41() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -5395,13 +5395,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Item42() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -5409,7 +5409,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -5417,14 +5417,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Item43() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -5432,7 +5432,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -5440,53 +5440,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Item44() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Item45() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Item46() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -5496,10 +5496,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Item47() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -5508,7 +5508,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -5517,14 +5517,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Item48() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -5533,17 +5533,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Item49() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -5552,14 +5552,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Item50() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -5568,14 +5568,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Item51() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -5584,14 +5584,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Item52() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -5600,17 +5600,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Layer0() {
-        
+
         let path = new paper.Path([[100, 100], [100, 200]]);
         let path2 = new paper.Path([[50, 150], [150, 150]]);
-        
+
         // Create a layer. The properties in the object literal
         // are set on the newly created layer.
         let layer = new paper.Layer({
@@ -5618,27 +5618,27 @@ function APIReferenceExamples() {
             strokeColor: 'black',
             position: paper.view.center
         });
-    
+
     }
     function Layer1() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Layer2() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -5648,89 +5648,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Layer3() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Layer4() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Layer5() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Layer6() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Layer7() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -5738,110 +5738,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Layer8() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Layer9() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Layer10() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Layer11() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Layer12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Layer13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Layer14() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Layer15() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -5849,36 +5849,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Layer16() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Layer17() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -5886,44 +5886,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Layer18() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Layer19() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Layer20() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -5935,39 +5935,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Layer21() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Layer22() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Layer23() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -5978,63 +5978,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Layer24() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Layer25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Layer26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Layer27() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -6045,32 +6045,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Layer28() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Layer29() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -6081,142 +6081,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Layer30() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Layer31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Layer32() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Layer33() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Layer34() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Layer35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Layer36() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Layer37() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -6224,7 +6224,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -6236,28 +6236,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Layer38() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Layer39() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -6265,16 +6265,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Layer40() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -6282,13 +6282,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Layer41() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -6296,13 +6296,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Layer42() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -6310,13 +6310,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Layer43() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -6324,7 +6324,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -6332,14 +6332,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Layer44() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -6347,7 +6347,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -6355,53 +6355,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Layer45() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Layer46() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Layer47() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path, event:paper.MouseEvent) {
@@ -6411,10 +6411,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Layer48() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -6423,7 +6423,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -6432,14 +6432,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Layer49() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -6448,17 +6448,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Layer50() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -6467,14 +6467,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Layer51() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -6483,14 +6483,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Layer52() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -6499,14 +6499,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Layer53() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -6515,14 +6515,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Layer54() {
-        
+
         let star = new paper.Path.Star({
             center: paper.view.center,
             points: 6,
@@ -6530,35 +6530,35 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'red'
         });
-        
+
         let circle = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             strokeColor: 'black'
         });
-        
+
         // Create a group of the two items and clip it:
         let group = new paper.Group([circle, star]);
         group.clipped = true;
-        
+
         // Lets animate the circle:
         function onFrame(event:paper.IFrameEvent) {
             let offset = Math.sin(event.count / 30) * 30;
             circle.position.x = paper.view.center.x + offset;
         }
-    
+
     }
     function Path0() {
-        
+
         let path = new paper.Path({
             segments: [[20, 20], [80, 80], [140, 20]],
             fillColor: 'black',
             closed: true
         });
-    
+
     }
     function Path1() {
-        
+
         let path = new paper.Path({
             segments: [[20, 20], [80, 80], [140, 20]],
             strokeColor: 'red',
@@ -6566,98 +6566,98 @@ function APIReferenceExamples() {
             strokeCap: 'round',
             selected: true
         });
-    
+
     }
     function Path2() {
-        
+
         let pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
         let path = new paper.Path(pathData);
         path.fillColor = 'red';
-    
+
     }
     function Path3() {
-        
+
         let from = new paper.Point(20, 20);
         let to = new paper.Point(80, 80);
         let path = new paper.Path.Line(from, to);
         path.strokeColor = 'black';
-    
+
     }
     function Path4() {
-        
+
         let path = new paper.Path.Line({
             from: [20, 20],
             to: [80, 80],
             strokeColor: 'black'
         });
-    
+
     }
     function Path5() {
-        
+
         let path = new paper.Path.Circle(new paper.Point(80, 50), 30);
         path.strokeColor = 'black';
-    
+
     }
     function Path6() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             strokeColor: 'black'
         });
-    
+
     }
     function Path7() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(60, 60));
         let path = new paper.Path.Rectangle(rectangle);
         path.strokeColor = 'black';
-    
+
     }
     function Path8() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(60, 60));
         let cornerSize = new paper.Size(10, 10);
         let path = new paper.Path.Rectangle(rectangle, cornerSize.height);
         path.strokeColor = 'black';
-    
+
     }
     function Path9() {
-        
+
         let point = new paper.Point(20, 20);
         let size = new paper.Size(60, 60);
         let path = new paper.Path.Rectangle(point, size);
         path.strokeColor = 'black';
-    
+
     }
     function Path10() {
-        
+
         let from = new paper.Point(20, 20);
         let to = new paper.Point(80, 80);
         let path = new paper.Path.Rectangle(from, to);
         path.strokeColor = 'black';
-    
+
     }
     function Path11() {
-        
+
         let path = new paper.Path.Rectangle({
             point: [20, 20],
             size: [60, 60],
             strokeColor: 'black'
         });
-    
+
     }
     function Path12() {
-        
+
         let path = new paper.Path.Rectangle({
             from: [20, 20],
             to: [80, 80],
             strokeColor: 'black'
         });
-    
+
     }
     function Path13() {
-        
+
         let path = new paper.Path.Rectangle({
             rectangle: {
                 topLeft: [20, 20],
@@ -6665,93 +6665,93 @@ function APIReferenceExamples() {
             },
             strokeColor: 'black'
         });
-    
+
     }
     function Path14() {
-        
+
         let path = new paper.Path.Rectangle({
          topLeft: [20, 20],
             bottomRight: [80, 80],
             radius: 10,
             strokeColor: 'black'
         });
-    
+
     }
     function Path15() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(180, 60));
         let path = new paper.Path.Ellipse(rectangle);
         path.fillColor = 'black';
-    
+
     }
     function Path16() {
-        
+
         let path = new paper.Path.Ellipse({
             point: [20, 20],
             size: [180, 60],
             fillColor: 'black'
         });
-    
+
     }
     function Path17() {
-        
+
         let shape = new paper.Path.Ellipse({
             center: [110, 50],
             radius: [90, 30],
             fillColor: 'black'
         });
-    
+
     }
     function Path18() {
-        
+
         let from = new paper.Point(20, 20);
         let through = new paper.Point(60, 20);
         let to = new paper.Point(80, 80);
         let path = new paper.Path.Arc(from, through, to);
         path.strokeColor = 'black';
-    
+
     }
     function Path19() {
-        
+
         let path = new paper.Path.Arc({
             from: [20, 20],
             through: [60, 20],
             to: [80, 80],
             strokeColor: 'black'
         });
-    
+
     }
     function Path20() {
-        
+
         let center = new paper.Point(50, 50);
         let sides = 3;
         let radius = 40;
         let triangle = new paper.Path.RegularPolygon(center, sides, radius);
         triangle.fillColor = 'black';
-    
+
     }
     function Path21() {
-        
+
         let triangle = new paper.Path.RegularPolygon({
             center: [50, 50],
             sides: 10,
             radius: 40,
             fillColor: 'black'
         });
-    
+
     }
     function Path22() {
-        
+
         let center = new paper.Point(50, 50);
         let points = 12;
         let radius1 = 25;
         let radius2 = 40;
         let path = new paper.Path.Star(center, points, radius1, radius2);
         path.fillColor = 'black';
-    
+
     }
     function Path23() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -6759,178 +6759,178 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-    
+
     }
     function Path24() {
-        
+
         let myPath = new paper.Path();
         myPath.strokeColor = 'black';
         myPath.add(new paper.Point(50, 75));
         myPath.add(new paper.Point(100, 25));
         myPath.add(new paper.Point(150, 75));
-        
+
         // Close the path:
         myPath.closed = true;
-    
+
     }
     function Path25() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.fullySelected = true;
-        
+
         let path2 = new paper.Path.Circle({
             center: [180, 50],
             radius: 35
         });
-        
+
         // Deselect the second segment of the second path:
         path2.segments[1].selected = false;
-        
+
         // If the path is fully selected (which it is),
         // set its fill color to red:
         if (path.fullySelected) {
             path.fillColor = 'red';
         }
-        
+
         // If the second path is fully selected (which it isn't, since we just
         // deselected its second segment),
         // set its fill color to red:
         if (path2.fullySelected) {
             path2.fillColor = 'red';
         }
-    
+
     }
     function Path26() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         // Add a segment at {x: 30, y: 75}
         path.add(new paper.Point(30, 75));
-        
+
         // Add two segments in one go at {x: 100, y: 20}
         // and {x: 170, y: 75}:
         path.addSegments([new paper.Point(100, 20), new paper.Point(170, 75)]);
-    
+
     }
     function Path27() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         // Add a segment at {x: 30, y: 75}
         path.add([30, 75]);
-        
+
         // Add two segments in one go at {x: 100, y: 20}
         // and {x: 170, y: 75}:
         path.addSegments([[100, 20], [170, 75]]);
-    
+
     }
     function Path28() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         // Add a segment at {x: 30, y: 75}
         path.add(new paper.Point({x: 30, y: 75}));
-        
+
         // Add two segments in one go at {x: 100, y: 20}
         // and {x: 170, y: 75}:
         path.addSegments([new paper.Point({x: 100, y: 20}), new paper.Point({x: 170, y: 75})]);
-    
+
     }
     function Path29() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(30, 75));
-        
+
         // Add a segment with handles:
         let point = new paper.Point(100, 20);
         let handleIn = new paper.Point(-50, 0);
         let handleOut = new paper.Point(50, 0);
         let added = path.add(new paper.Segment(point, handleIn, handleOut));
-        
+
         // Select the added segment, so we can see its handles:
         added.selected = true;
-        
+
         path.add(new paper.Point(170, 75));
-    
+
     }
     function Path30() {
-        
+
         let myPath = new paper.Path();
         myPath.strokeColor = 'black';
         myPath.add(new paper.Point(50, 75));
         myPath.add(new paper.Point(150, 75));
-        
+
         // Insert a new segment into myPath at index 1:
         myPath.insert(1, new paper.Point(100, 25));
-        
+
         // Select the segment which we just inserted:
         myPath.segments[1].selected = true;
-    
+
     }
     function Path31() {
-        
+
         let myPath = new paper.Path();
         myPath.strokeColor = 'black';
         myPath.add(new paper.Point(50, 75));
         myPath.add(new paper.Point(150, 75));
-        
+
         // Insert two segments into myPath at index 1:
         myPath.insertSegments(1, [[80, 25], [120, 25]]);
-        
+
         // Select the segments which we just inserted:
         myPath.segments[1].selected = true;
         myPath.segments[2].selected = true;
-    
+
     }
     function Path32() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
         let points = [new paper.Point(30, 50), new paper.Point(170, 50)];
         path.addSegments(points);
-    
+
     }
     function Path33() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
         let array = [[30, 75], [100, 20], [170, 75]];
         path.addSegments(array);
-    
+
     }
     function Path34() {
-        
+
         let path = new paper.Path({
             strokeColor: 'black'
         });
         path.addSegments([[30, 75], [100, 20], [170, 75]]);
-        
+
         let path2 = new paper.Path();
         path2.strokeColor = 'red';
-        
+
         // Add the second and third segments of path to path2:
         path2.addSegments([path.segments[1], path.segments[2]]);
-        
+
         // Move path2 30pt to the right:
         path2.position.x += 30;
-    
+
     }
     function Path35() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let path = new paper.Path.Circle({
@@ -6938,16 +6938,16 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'black'
         });
-        
+
         // Remove its second segment:
         path.removeSegment(1);
-        
+
         // Select the path, so we can see its segments:
         path.selected = true;
-    
+
     }
     function Path36() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let path = new paper.Path.Circle({
@@ -6955,170 +6955,170 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'black'
         });
-        
+
         // Remove the segments from index 1 till index 2:
         path.removeSegments(1, 2);
-        
+
         // Select the path, so we can see its segments:
         path.selected = true;
-    
+
     }
     function Path37() {
-        
+
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 40,
             strokeColor: 'black'
         });
-        
+
         let pointOnCircle = paper.view.center.add(new paper.Point({
             length: 40,
             angle: 30
         }));
-        
+
         let location = path.getNearestLocation(pointOnCircle);
-        
+
         path.split(location);
         path.lastSegment.selected = true;
-    
+
     }
     function Path38() {
-        
+
         let path = new paper.Path([[20, 20], [50, 80], [80, 20]]);
         path.strokeColor = 'black';
-        
+
         // Split the path half-way:
         let path2 = path.split(path.length / 2);
-        
+
         // Give the resulting path a red stroke-color
         // and move it 20px to the right:
         path2.strokeColor = 'red';
         path2.position.x += 20;
-    
+
     }
     function Path39() {
-        
+
         let path = new paper.Path.Rectangle({
             from: [20, 20],
             to: [80, 80],
             strokeColor: 'black'
         });
-        
+
         // Split the path half-way:
         path.split(path.length / 2);
-        
+
         // Move the first segment, to show where the path
         // was split:
         path.firstSegment.point.x += 20;
-        
+
         // Select the first segment:
         path.firstSegment.selected = true;
-    
+
     }
     function Path40() {
-        
+
         let path = new paper.Path({
             segments: [[30, 25], [30, 75]],
             strokeColor: 'black'
         });
-        
+
         let path2 = new paper.Path({
             segments: [[200, 25], [200, 75]],
             strokeColor: 'black'
         });
-        
+
         // Join the paths:
         path.join(path2);
-    
+
     }
     function Path41() {
-        
+
         let path = new paper.Path({
             segments: [[30, 25], [30, 75]],
             strokeColor: 'black'
         });
-        
+
         let path2 = new paper.Path({
             segments: [[30, 25], [80, 25]],
             strokeColor: 'black'
         });
-        
+
         // Join the paths:
         path.join(path2);
-        
+
         // After joining, path with have 3 segments, since it
         // shared its first segment point with the first
         // segment point of path2.
-        
+
         // Select the path to show that they have joined:
         path.selected = true;
-    
+
     }
     function Path42() {
-        
+
         let path = new paper.Path({
             segments: [[30, 25], [80, 25], [80, 75]],
             strokeColor: 'black'
         });
-        
+
         let path2 = new paper.Path({
             segments: [[30, 25], [30, 75], [80, 75]],
             strokeColor: 'black'
         });
-        
+
         // Join the paths:
         path.join(path2);
-        
+
         // Because the paths were joined at two points, the path is closed
         // and has 4 segments.
-        
+
         // Select the path to show that they have joined:
         path.selected = true;
-    
+
     }
     function Path43() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         // We're going to be working with a third of the length
         // of the path as the offset:
         let offset = path.length / 3;
-        
+
         // Find the point on the path:
         let point = path.getPointAt(offset);
-        
+
         // Create a small circle shaped path at the point:
         let circle = new paper.Path.Circle({
             center: point,
             radius: 3,
             fillColor: 'red'
         });
-    
+
     }
     function Path44() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         let amount = 5;
         let length = path.length;
         for (let i = 0; i < amount + 1; i++) {
             let offset = i / amount * length;
-        
+
             // Find the point on the path at the given offset:
             let point = path.getPointAt(offset);
-        
+
             // Create a small circle shaped path at the point:
             let circle = new paper.Path.Circle({
                 center: point,
@@ -7126,139 +7126,139 @@ function APIReferenceExamples() {
                 fillColor: 'red'
             });
         }
-    
+
     }
     function Path45() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         // We're going to be working with a third of the length
         // of the path as the offset:
         let offset = path.length / 3;
-        
+
         // Find the point on the path:
         let point = path.getPointAt(offset);
-        
+
         // Find the tangent vector at the given offset
         // and give it a length of 60:
         let tangent = path.getTangentAt(offset).multiply(60);
-        
+
         let line = new paper.Path({
             segments: [point, point.add(tangent)],
             strokeColor: 'red'
         })
-    
+
     }
     function Path46() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         let amount = 6;
         let length = path.length;
         for (let i = 0; i < amount + 1; i++) {
             let offset = i / amount * length;
-        
+
             // Find the point on the path at the given offset:
             let point = path.getPointAt(offset);
-        
+
             // Find the tangent vector on the path at the given offset
             // and give it a length of 60:
             let tangent = path.getTangentAt(offset).multiply(60);
-        
+
             let line = new paper.Path({
                 segments: [point, point.add(tangent)],
                 strokeColor: 'red'
             })
         }
-    
+
     }
     function Path47() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         // We're going to be working with a third of the length
         // of the path as the offset:
         let offset = path.length / 3;
-        
+
         // Find the point on the path:
         let point = path.getPointAt(offset);
-        
+
         // Find the normal vector on the path at the given offset
         // and give it a length of 30:
         let normal = path.getNormalAt(offset).multiply(30);
-        
+
         let line = new paper.Path({
             segments: [point, point.add(normal)],
             strokeColor: 'red'
         });
-    
+
     }
     function Path48() {
-        
+
         // Create an arc shaped path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         path.add(new paper.Point(40, 100));
         path.arcTo(new paper.Point(150, 100));
-        
+
         let amount = 10;
         let length = path.length;
         for (let i = 0; i < amount + 1; i++) {
             let offset = i / amount * length;
-        
+
             // Find the point on the path at the given offset:
             let point = path.getPointAt(offset);
-        
+
             // Find the normal vector on the path at the given offset
             // and give it a length of 30:
             let normal = path.getNormalAt(offset).multiply(30);
-        
+
             let line = new paper.Path({
                 segments: [point, point.add(normal)],
                 strokeColor: 'red'
             });
         }
-    
+
     }
     function Path49() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Path50() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -7268,89 +7268,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Path51() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Path52() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Path53() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Path54() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Path55() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -7358,110 +7358,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Path56() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Path57() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Path58() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Path59() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Path60() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Path61() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Path62() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Path63() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -7469,36 +7469,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Path64() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Path65() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -7506,44 +7506,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Path66() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Path67() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Path68() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -7555,39 +7555,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Path69() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Path70() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Path71() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -7598,63 +7598,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Path72() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Path73() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Path74() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Path75() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -7665,32 +7665,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Path76() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Path77() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -7701,142 +7701,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Path78() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Path79() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Path80() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Path81() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Path82() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Path83() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Path84() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Path85() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -7844,7 +7844,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -7856,28 +7856,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Path86() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Path87() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -7885,16 +7885,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Path88() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -7902,13 +7902,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Path89() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -7916,13 +7916,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Path90() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -7930,13 +7930,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Path91() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -7944,7 +7944,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -7952,14 +7952,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Path92() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -7967,7 +7967,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -7975,53 +7975,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Path93() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Path94() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Path95() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -8031,10 +8031,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Path96() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -8043,7 +8043,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -8052,14 +8052,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Path97() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -8068,17 +8068,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Path98() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -8087,14 +8087,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Path99() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -8103,14 +8103,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Path100() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -8119,14 +8119,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Path101() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -8135,26 +8135,26 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Path102() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(30, 25), new paper.Size(50, 50));
         path.strokeColor = 'black';
-        
+
         let secondPath = path.clone();
         let intersectionGroup = new paper.Group();
-        
+
         function onFrame(event:paper.IFrameEvent) {
             secondPath.rotate(1);
-        
+
             let intersections = path.getIntersections(secondPath);
             intersectionGroup.removeChildren();
-        
+
             for (let i = 0; i < intersections.length; i++) {
                 let intersectionPath = new paper.Path.Circle({
                     center: intersections[i].point,
@@ -8164,10 +8164,10 @@ function APIReferenceExamples() {
                 });
             }
         }
-    
+
     }
     function Path103() {
-        
+
         let star = new paper.Path.Star({
             center: paper.view.center,
             points: 10,
@@ -8175,45 +8175,45 @@ function APIReferenceExamples() {
             radius2: 60,
             strokeColor: 'black'
         });
-        
+
         let circle = new paper.Path.Circle({
             center: paper.view.center,
             radius: 3,
             fillColor: 'red'
         });
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Get the nearest point from the mouse position
             // to the star shaped path:
             let nearestPoint = star.getNearestPoint(event.point);
-        
+
             // Move the red circle to the nearest point:
             circle.position = nearestPoint;
         }
-    
+
     }
     function Path104() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Select the path, so we can inspect its segments:
         path.selected = true;
-        
+
         // Create a copy of the path and move it by 150 points:
         let copy = path.clone();
         copy.position.x += 150;
-        
+
         // Flatten the copied path, with a maximum error of 4 points:
         copy.flatten(4);
-    
+
     }
     function Path105() {
-        
+
         // Create a rectangular path with its top-left point at
         // {x: 30, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -8221,47 +8221,47 @@ function APIReferenceExamples() {
             size: [50, 50],
             strokeColor: 'black',
         });
-        
+
         // Select the path, so we can see its handles:
         path.fullySelected = true;
-        
+
         // Create a copy of the path and move it 100 to the right:
         let copy = path.clone();
         copy.position.x += 100;
-        
+
         // Smooth the segments of the copy:
         copy.smooth({ type: 'continuous' });
-    
+
     }
     function Path106() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 50));
-        
+
         let y = 5;
         let x = 3;
-        
+
         for (let i = 0; i < 28; i++) {
             y *= -1.1;
             x *= 1.1;
             path.lineBy(new paper.Point(x, y));
         }
-        
+
         // Create a copy of the path and move it 100 down:
         let copy = path.clone();
         copy.position.y += 120;
-        
+
         // Select the path, so we can see its handles:
         copy.fullySelected = true;
-        
+
         // Smooth the path using centripetal Catmull-Rom splines:
         copy.smooth({ type: 'catmull-rom', factor: 0.5 });
-    
+
     }
     function Path107() {
-        
+
         // Create 5 rectangles, next to each other:
         let paths:paper.Path[] = [];
         for (let i = 0; i < 5; i++) {
@@ -8277,30 +8277,30 @@ function APIReferenceExamples() {
             from: paths[1].segments[0],
             to: paths[1].segments[2]
         });
-        
+
         // Smooth a range, using curves:
         paths[2].smooth({
             type: 'continuous',
             from: paths[2].curves[0],
             to: paths[2].curves[1]
         });
-        
+
         // Smooth a range, using indices:
         paths[3].smooth({ type: 'continuous', from: 0, to: 2 });
-        
+
         // Smooth a range, using negative indices:
         paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
-    
+
     }
     function Path108() {
-        
+
         let path: paper.Path | null;
         function onMouseDown(event:paper.ToolEvent) {
             // If we already made a path before, deselect it:
             if (path) {
                 path.selected = false;
             }
-        
+
             // Create a new path and add the position of the mouse
             // as its first segment. Select it, so we can see the
             // segment points:
@@ -8310,14 +8310,14 @@ function APIReferenceExamples() {
                 selected: true
             });
         }
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // On every drag event, add a segment to the path
             // at the position of the mouse:
             if(path)
                 path.add(event.point);
         }
-        
+
         function onMouseUp(event:paper.ToolEvent) {
             // When the mouse is released, simplify the path:
             if(path){
@@ -8325,52 +8325,52 @@ function APIReferenceExamples() {
                 path.selected = true;
             }
         }
-    
+
     }
     function Path109() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         let firstPoint = new paper.Point(30, 75);
         path.add(firstPoint);
-        
+
         // The point through which we will create the arc:
         let throughPoint = new paper.Point(40, 40);
-        
+
         // The point at which the arc will end:
         let toPoint = new paper.Point(130, 75);
-        
+
         // Draw an arc through 'throughPoint' to 'toPoint'
         path.arcTo(throughPoint, toPoint);
-        
+
         // Add a red circle shaped path at the position of 'throughPoint':
         let circle = new paper.Path.Circle(throughPoint, 3);
         circle.fillColor = 'red';
-    
+
     }
     function Path110() {
-        
+
         let myPath:paper.Path | null;
         function onMouseDrag(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw an arc through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.arcTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-        
+
         // When the mouse is released, deselect the path
         // and fill it with black.
         function onMouseUp(event:paper.ToolEvent) {
@@ -8379,33 +8379,33 @@ function APIReferenceExamples() {
                 myPath.fillColor = 'black';
             }
         }
-    
+
     }
     function Path111() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 75));
         path.arcTo(new paper.Point(130, 75));
-        
+
         let path2 = new paper.Path();
         path2.strokeColor = 'red';
         path2.add(new paper.Point(180, 25));
-        
+
         // To draw an arc in anticlockwise direction,
         // we pass `false` as the second argument to arcTo:
         path2.arcTo(new paper.Point(280, 25), false);
-    
+
     }
     function Path112() {
-        
+
         let myPath:paper.Path;
-        
+
         // The mouse has to move at least 20 points before
         // the next mouse drag event is fired:
         paper.tool.minDistance = 20;
-        
+
         // When the user clicks, create a new path and add
         // the current mouse position to it as its first segment:
         function onMouseDown(event:paper.ToolEvent) {
@@ -8413,61 +8413,61 @@ function APIReferenceExamples() {
             myPath.strokeColor = 'black';
             myPath.add(event.point);
         }
-        
+
         // On each mouse drag event, draw an arc to the current
         // position of the mouse:
         function onMouseDrag(event:paper.ToolEvent) {
             myPath.arcTo(event.point);
         }
-    
+
     }
     function Path113() {
-        
+
         let myPath: paper.Path | null;
         function onMouseMove(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw a curve through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.curveTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-    
+
     }
     function Path114() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add a segment at {x: 50, y: 50}
         path.add(new paper.Point(25, 25));
-        
+
         // Add a segment relative to the last segment of the path.
         // 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
         path.lineBy(new paper.Point(50, 0));
-        
+
         // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
         path.lineBy(new paper.Point(0, 50));
-    
+
     }
     function Path115() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add the first segment at {x: 50, y: 50}
         path.add(paper.view.center);
-        
+
         // Loop 500 times:
         for (let i = 0; i < 500; i++) {
             // Create a vector with an ever increasing length
@@ -8479,29 +8479,29 @@ function APIReferenceExamples() {
             // Add the vector relatively to the last segment point:
             path.lineBy(vector);
         }
-        
+
         // Smooth the handles of the path:
         path.smooth();
-        
+
         // Uncomment the following line and click on 'run' to see
         // the construction of the path:
         // path.selected = true;
-    
+
     }
     function PathItem0() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(30, 25), new paper.Size(50, 50));
         path.strokeColor = 'black';
-        
+
         let secondPath = path.clone();
         let intersectionGroup = new paper.Group();
-        
+
         function onFrame(event:paper.IFrameEvent) {
             secondPath.rotate(1);
-        
+
             let intersections = path.getIntersections(secondPath);
             intersectionGroup.removeChildren();
-        
+
             for (let i = 0; i < intersections.length; i++) {
                 let intersectionPath = new paper.Path.Circle({
                     center: intersections[i].point,
@@ -8511,10 +8511,10 @@ function APIReferenceExamples() {
                 });
             }
         }
-    
+
     }
     function PathItem1() {
-        
+
         let star = new paper.Path.Star({
             center: paper.view.center,
             points: 10,
@@ -8522,45 +8522,45 @@ function APIReferenceExamples() {
             radius2: 60,
             strokeColor: 'black'
         });
-        
+
         let circle = new paper.Path.Circle({
             center: paper.view.center,
             radius: 3,
             fillColor: 'red'
         });
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Get the nearest point from the mouse position
             // to the star shaped path:
             let nearestPoint = star.getNearestPoint(event.point);
-        
+
             // Move the red circle to the nearest point:
             circle.position = nearestPoint;
         }
-    
+
     }
     function PathItem2() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Select the path, so we can inspect its segments:
         path.selected = true;
-        
+
         // Create a copy of the path and move it by 150 points:
         let copy = path.clone();
         copy.position.x += 150;
-        
+
         // Flatten the copied path, with a maximum error of 4 points:
         copy.flatten(4);
-    
+
     }
     function PathItem3() {
-        
+
         // Create a rectangular path with its top-left point at
         // {x: 30, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -8568,47 +8568,47 @@ function APIReferenceExamples() {
             size: [50, 50],
             strokeColor: 'black',
         });
-        
+
         // Select the path, so we can see its handles:
         path.fullySelected = true;
-        
+
         // Create a copy of the path and move it 100 to the right:
         let copy = path.clone();
         copy.position.x += 100;
-        
+
         // Smooth the segments of the copy:
         copy.smooth({ type: 'continuous' });
-    
+
     }
     function PathItem4() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 50));
-        
+
         let y = 5;
         let x = 3;
-        
+
         for (let i = 0; i < 28; i++) {
             y *= -1.1;
             x *= 1.1;
             path.lineBy(new paper.Point(x, y));
         }
-        
+
         // Create a copy of the path and move it 100 down:
         let copy = path.clone();
         copy.position.y += 120;
-        
+
         // Select the path, so we can see its handles:
         copy.fullySelected = true;
-        
+
         // Smooth the path using centripetal Catmull-Rom splines:
         copy.smooth({ type: 'catmull-rom', factor: 0.5 });
-    
+
     }
     function PathItem5() {
-        
+
         // Create 5 rectangles, next to each other:
         let paths:paper.Path[] = [];
         for (let i = 0; i < 5; i++) {
@@ -8624,30 +8624,30 @@ function APIReferenceExamples() {
             from: paths[1].segments[0],
             to: paths[1].segments[2]
         });
-        
+
         // Smooth a range, using curves:
         paths[2].smooth({
             type: 'continuous',
             from: paths[2].curves[0],
             to: paths[2].curves[1]
         });
-        
+
         // Smooth a range, using indices:
         paths[3].smooth({ type: 'continuous', from: 0, to: 2 });
-        
+
         // Smooth a range, using negative indices:
         paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
-    
+
     }
     function PathItem6() {
-        
+
         let path:paper.Path | null;
         function onMouseDown(event:paper.ToolEvent) {
             // If we already made a path before, deselect it:
             if (path) {
                 path.selected = false;
             }
-        
+
             // Create a new path and add the position of the mouse
             // as its first segment. Select it, so we can see the
             // segment points:
@@ -8657,14 +8657,14 @@ function APIReferenceExamples() {
                 selected: true
             });
         }
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // On every drag event, add a segment to the path
             // at the position of the mouse:
             if(path)
                 path.add(event.point);
         }
-        
+
         function onMouseUp(event:paper.ToolEvent) {
             // When the mouse is released, simplify the path:
             if(path){
@@ -8672,52 +8672,52 @@ function APIReferenceExamples() {
                 path.selected = true;
             }
         }
-    
+
     }
     function PathItem7() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         let firstPoint = new paper.Point(30, 75);
         path.add(firstPoint);
-        
+
         // The point through which we will create the arc:
         let throughPoint = new paper.Point(40, 40);
-        
+
         // The point at which the arc will end:
         let toPoint = new paper.Point(130, 75);
-        
+
         // Draw an arc through 'throughPoint' to 'toPoint'
         path.arcTo(throughPoint, toPoint);
-        
+
         // Add a red circle shaped path at the position of 'throughPoint':
         let circle = new paper.Path.Circle(throughPoint, 3);
         circle.fillColor = 'red';
-    
+
     }
     function PathItem8() {
-        
+
         let myPath: paper.Path | null;
         function onMouseDrag(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw an arc through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.arcTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-        
+
         // When the mouse is released, deselect the path
         // and fill it with black.
         function onMouseUp(event:paper.ToolEvent) {
@@ -8726,33 +8726,33 @@ function APIReferenceExamples() {
                 myPath.fillColor = 'black';
             }
         }
-    
+
     }
     function PathItem9() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         path.add(new paper.Point(30, 75));
         path.arcTo(new paper.Point(130, 75));
-        
+
         let path2 = new paper.Path();
         path2.strokeColor = 'red';
         path2.add(new paper.Point(180, 25));
-        
+
         // To draw an arc in anticlockwise direction,
         // we pass `false` as the second argument to arcTo:
         path2.arcTo(new paper.Point(280, 25), false);
-    
+
     }
     function PathItem10() {
-        
+
         let myPath:paper.Path | null;
-        
+
         // The mouse has to move at least 20 points before
         // the next mouse drag event is fired:
         paper.tool.minDistance = 20;
-        
+
         // When the user clicks, create a new path and add
         // the current mouse position to it as its first segment:
         function onMouseDown(event:paper.ToolEvent) {
@@ -8760,62 +8760,62 @@ function APIReferenceExamples() {
             myPath.strokeColor = 'black';
             myPath.add(event.point);
         }
-        
+
         // On each mouse drag event, draw an arc to the current
         // position of the mouse:
         function onMouseDrag(event:paper.ToolEvent) {
             if(myPath)
                 myPath.arcTo(event.point);
         }
-    
+
     }
     function PathItem11() {
-        
+
         let myPath:paper.Path | null;
         function onMouseMove(event:paper.ToolEvent) {
             // If we created a path before, remove it:
             if (myPath) {
                 myPath.remove();
             }
-        
+
             // Create a new path and add a segment point to it
             // at {x: 150, y: 150):
             myPath = new paper.Path();
             myPath.add(new paper.Point(150, 150));
-        
+
             // Draw a curve through the position of the mouse to 'toPoint'
             let toPoint = new paper.Point(350, 150);
             myPath.curveTo(event.point, toPoint);
-        
+
             // Select the path, so we can see its segments:
             myPath.selected = true;
         }
-    
+
     }
     function PathItem12() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add a segment at {x: 50, y: 50}
         path.add(new paper.Point(25, 25));
-        
+
         // Add a segment relative to the last segment of the path.
         // 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
         path.lineBy(new paper.Point(50, 0));
-        
+
         // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
         path.lineBy(new paper.Point(0, 50));
-    
+
     }
     function PathItem13() {
-        
+
         let path = new paper.Path();
         path.strokeColor = 'black';
-        
+
         // Add the first segment at {x: 50, y: 50}
         path.add(paper.view.center);
-        
+
         // Loop 500 times:
         for (let i = 0; i < 500; i++) {
             // Create a vector with an ever increasing length
@@ -8827,34 +8827,34 @@ function APIReferenceExamples() {
             // Add the vector relatively to the last segment point:
             path.lineBy(vector);
         }
-        
+
         // Smooth the handles of the path:
         path.smooth();
-        
+
         // Uncomment the following line and click on 'run' to see
         // the construction of the path:
         // path.selected = true;
-    
+
     }
     function PathItem14() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function PathItem15() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -8864,89 +8864,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function PathItem16() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function PathItem17() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function PathItem18() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function PathItem19() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function PathItem20() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -8954,110 +8954,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function PathItem21() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function PathItem22() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function PathItem23() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function PathItem24() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function PathItem25() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function PathItem26() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function PathItem27() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function PathItem28() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -9065,36 +9065,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function PathItem29() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function PathItem30() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -9102,44 +9102,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function PathItem31() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function PathItem32() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function PathItem33() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -9151,39 +9151,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function PathItem34() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function PathItem35() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PathItem36() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -9194,63 +9194,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PathItem37() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function PathItem38() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PathItem39() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PathItem40() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -9261,32 +9261,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PathItem41() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PathItem42() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -9297,142 +9297,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PathItem43() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function PathItem44() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function PathItem45() {
-        
+
         function enter(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function PathItem46() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PathItem47() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function PathItem48() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function PathItem49() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function PathItem50() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -9440,7 +9440,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -9452,28 +9452,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function PathItem51() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function PathItem52() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -9481,16 +9481,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function PathItem53() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -9498,13 +9498,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function PathItem54() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -9512,13 +9512,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function PathItem55() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -9526,13 +9526,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function PathItem56() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -9540,7 +9540,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -9548,14 +9548,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function PathItem57() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -9563,7 +9563,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -9571,53 +9571,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function PathItem58() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function PathItem59() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function PathItem60() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -9627,10 +9627,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function PathItem61() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -9639,7 +9639,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -9648,14 +9648,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function PathItem62() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -9664,17 +9664,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function PathItem63() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -9683,14 +9683,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function PathItem64() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -9699,14 +9699,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function PathItem65() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -9715,14 +9715,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function PathItem66() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -9731,37 +9731,37 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Point0() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40
         });
-        
+
         // Select the third segment point:
         path.segments[2].point.selected = true;
-        
+
         // Select the item's position, which is the pivot point
         // around which it is transformed:
         path.position.selected = true;
-    
+
     }
     function PointText0() {
-        
+
         let text = new paper.PointText(new paper.Point(200, 50));
         text.justification = 'center';
         text.fillColor = 'black';
         text.content = 'The contents of the point text';
-    
+
     }
     function PointText1() {
-        
+
         let text = new paper.PointText({
             point: [50, 50],
             content: 'The contents of the point text',
@@ -9770,27 +9770,27 @@ function APIReferenceExamples() {
             fontWeight: 'bold',
             fontSize: 25
         });
-    
+
     }
     function PointText2() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function PointText3() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -9800,89 +9800,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function PointText4() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function PointText5() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function PointText6() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function PointText7() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function PointText8() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -9890,110 +9890,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function PointText9() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function PointText10() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function PointText11() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function PointText12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function PointText13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function PointText14() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function PointText15() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function PointText16() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -10001,36 +10001,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function PointText17() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function PointText18() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -10038,44 +10038,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function PointText19() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function PointText20() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function PointText21() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -10087,39 +10087,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function PointText22() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function PointText23() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PointText24() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -10130,63 +10130,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PointText25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function PointText26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PointText27() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PointText28() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -10197,32 +10197,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PointText29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PointText30() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -10233,142 +10233,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function PointText31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function PointText32() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function PointText33() {
-        
+
         function enter(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path, event:paper.MouseEvent) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function PointText34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function PointText35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function PointText36() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function PointText37() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function PointText38() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -10376,7 +10376,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -10388,28 +10388,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function PointText39() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function PointText40() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -10417,16 +10417,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function PointText41() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -10434,13 +10434,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function PointText42() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -10448,13 +10448,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function PointText43() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -10462,13 +10462,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function PointText44() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -10476,7 +10476,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -10484,14 +10484,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function PointText45() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -10499,7 +10499,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -10507,53 +10507,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function PointText46() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function PointText47() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function PointText48() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -10563,10 +10563,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function PointText49() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -10575,7 +10575,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -10584,14 +10584,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function PointText50() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -10600,17 +10600,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function PointText51() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -10619,14 +10619,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function PointText52() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -10635,14 +10635,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function PointText53() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -10651,14 +10651,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function PointText54() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -10667,142 +10667,142 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function PointText55() {
-        
+
         // Create a point-text item at {x: 30, y: 30}:
         let text = new paper.PointText(new paper.Point(30, 30));
         text.fillColor = 'black';
-        
+
         // Set the content of the text item:
         text.content = 'Hello world';
-    
+
     }
     function PointText56() {
-        
+
         // Create a point-text item at {x: 30, y: 30}:
         let text = new paper.PointText(new paper.Point(30, 30));
         text.fillColor = 'black';
-        
+
         text.content = 'Move your mouse over the paper.view, to see its position';
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Each time the mouse is moved, set the content of
             // the point text to describe the position of the mouse:
             text.content = 'Your position is: ' + event.point.toString();
         }
-    
+
     }
     function Project0() {
-        
+
         paper.project.currentStyle = {
             fillColor: 'red',
             strokeColor: 'black',
             strokeWidth: 5
         }
-        
+
         // The following paths will take over all style properties of
         // the current style:
         let path = new paper.Path.Circle(new paper.Point(75, 50), 30);
         let path2 = new paper.Path.Circle(new paper.Point(175, 50), 20);
-    
+
     }
     function Project1() {
-        
+
         paper.project.currentStyle.fillColor = 'red';
-        
+
         // The following path will take over the fill color we just set:
         let path = new paper.Path.Circle(new paper.Point(75, 50), 30);
         let path2 = new paper.Path.Circle(new paper.Point(175, 50), 20);
-    
+
     }
     function Project2() {
-        
+
         let path1 = new paper.Path.Circle({
             center: [50, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: [150, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // Select path2:
         path2.selected = true;
-        
+
         // Fetch all selected path items:
         let items = paper.project.getItems({
             selected: true,
             class: paper.Path
         });
-        
+
         // Change the fill color of the selected path to red:
         items[0].fillColor = 'red';
-    
+
     }
     function Project3() {
-        
+
         let path1 = new paper.Path.Circle({
             center: [50, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: [150, 50],
             radius: 25,
             fillColor: 'purple'
         });
-        
+
         // Fetch all items with a purple fill color:
         let items = paper.project.getItems({
             fillColor: 'purple'
         });
-        
+
         // Select the fetched item:
         items[0].selected = true;
-    
+
     }
     function Project4() {
-        
+
         let path1 = new paper.Path.Circle({
             center: [50, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: [150, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // Fetch all path items positioned at {x: 150, y: 150}:
         let items = paper.project.getItems({
             position: [150, 50]
         });
-        
+
         // Select the fetched path:
         items[0].selected = true;
-    
+
     }
     function Project5() {
-        
+
         // Create a circle shaped path:
         let path1 = new paper.Path.Circle({
             center: [50, 50],
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with 50% opacity:
         let path2 = new paper.Path.Circle({
             center: [150, 50],
@@ -10810,20 +10810,20 @@ function APIReferenceExamples() {
             fillColor: 'black',
             opacity: 0.5
         });
-        
+
         // Fetch all items whose opacity is smaller than 1
         let items = paper.project.getItems({
             opacity: function(value:number) {
                 return value < 1;
             }
         });
-        
+
         // Select the fetched item:
         items[0].selected = true;
-    
+
     }
     function Project6() {
-        
+
         // Create a rectangle shaped path (4 segments):
         let path1 = new paper.Path.Rectangle({
             from: [25, 25],
@@ -10831,7 +10831,7 @@ function APIReferenceExamples() {
             strokeColor: 'black',
             strokeWidth: 10
         });
-        
+
         // Create a line shaped path (2 segments):
         let path2 = new paper.Path.Line({
             from: [125, 50],
@@ -10839,7 +10839,7 @@ function APIReferenceExamples() {
             strokeColor: 'black',
             strokeWidth: 10
         });
-        
+
         // Fetch all paths with 2 segments:
         let items = paper.project.getItems({
             class: paper.Path,
@@ -10847,13 +10847,13 @@ function APIReferenceExamples() {
                 return segments.length == 2;
          }
         });
-        
+
         // Select the fetched path:
         items[0].selected = true;
-    
+
     }
     function Project7() {
-        
+
         // Create a black circle shaped path:
         let path1 = new paper.Path.Circle({
             center: [50, 50],
@@ -10867,7 +10867,7 @@ function APIReferenceExamples() {
                 }
             }
         });
-        
+
         // Create a red circle shaped path:
         let path2 = new paper.Path.Circle({
             center: [150, 50],
@@ -10881,7 +10881,7 @@ function APIReferenceExamples() {
                 }
             }
         });
-        
+
         // Fetch all items whose data object contains a person
         // object whose name is john and length is 180:
         let items = paper.project.getItems({
@@ -10892,13 +10892,13 @@ function APIReferenceExamples() {
                 }
             }
         });
-        
+
         // Select the fetched item:
         items[0].selected = true;
-    
+
     }
     function Project8() {
-        
+
         // Create a path named 'aardvark':
         let path1 = new paper.Path.Circle({
             center: [50, 50],
@@ -10906,7 +10906,7 @@ function APIReferenceExamples() {
             fillColor: 'black',
             name: 'aardvark'
         });
-        
+
         // Create a path named 'apple':
         let path2 = new paper.Path.Circle({
             center: [150, 50],
@@ -10914,7 +10914,7 @@ function APIReferenceExamples() {
             fillColor: 'black',
             name: 'apple'
         });
-        
+
         // Create a path named 'banana':
         path2 = new paper.Path.Circle({
             center: [250, 50],
@@ -10922,86 +10922,86 @@ function APIReferenceExamples() {
             fillColor: 'black',
             name: 'banana'
         });
-        
+
         // Fetch all items that have a name starting with 'a':
         let items = paper.project.getItems({
             name: /^a/
         });
-        
+
         // Change the fill color of the matched items:
         for (let i = 0; i < items.length; i++) {
          items[i].fillColor = 'red';
         }
-    
+
     }
     function Raster0() {
-        
+
         let url = 'http://assets.paperjs.org/images/marilyn.jpg';
         let raster = new paper.Raster(url);
-        
+
         // If you create a Raster using a url, you can use the onLoad
         // handler to do something once it is loaded:
         raster.onLoad = function() {
             console.log('The image has loaded.');
         };
-    
+
     }
     function Raster1() {
-        
+
         let raster = new paper.Raster({
             source: 'http://assets.paperjs.org/images/marilyn.jpg',
             position: paper.view.center
         });
-        
+
         raster.scale(0.5);
         raster.rotate(10);
-    
+
     }
     function Raster2() {
-        
+
         let raster = new paper.Raster();
         raster.source = 'http://paperjs.org/about/paper-js.gif';
         raster.position = paper.view.center;
-    
+
     }
     function Raster3() {
-        
+
         let raster = new paper.Raster({
             source: 'http://paperjs.org/about/paper-js.gif',
             position: paper.view.center
         });
-    
+
     }
     function Raster4() {
-        
+
         let raster = new paper.Raster({
             crossOrigin: 'anonymous',
             source: 'http://assets.paperjs.org/images/marilyn.jpg',
             position: paper.view.center
         });
-        
+
         console.log(paper.view.element.toDataURL('image/png').substring(0, 32));
-    
+
     }
     function Raster5() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Raster6() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -11011,89 +11011,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Raster7() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Raster8() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Raster9() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Raster10() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Raster11() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -11101,110 +11101,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Raster12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Raster13() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Raster14() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Raster15() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Raster16() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Raster17() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Raster18() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Raster19() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -11212,36 +11212,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Raster20() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Raster21() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -11249,44 +11249,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Raster22() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Raster23() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Raster24() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -11298,39 +11298,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Raster25() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Raster26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Raster27() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -11341,63 +11341,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Raster28() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Raster29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Raster30() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Raster31() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -11408,32 +11408,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Raster32() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Raster33() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -11444,142 +11444,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Raster34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Raster35() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Raster36() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Raster37() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Raster38() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Raster39() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Raster40() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Raster41() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -11587,7 +11587,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -11599,28 +11599,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Raster42() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Raster43() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -11628,16 +11628,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Raster44() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -11645,13 +11645,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Raster45() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -11659,13 +11659,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Raster46() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -11673,13 +11673,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Raster47() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -11687,7 +11687,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -11695,14 +11695,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Raster48() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -11710,7 +11710,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -11718,53 +11718,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Raster49() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Raster50() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Raster51() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -11774,10 +11774,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Raster52() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -11786,7 +11786,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -11795,14 +11795,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Raster53() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -11811,17 +11811,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Raster54() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -11830,14 +11830,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Raster55() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -11846,14 +11846,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Raster56() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -11862,14 +11862,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Raster57() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -11878,30 +11878,30 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Rectangle0() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             selected: true
         });
-        
+
         path.bounds.selected = true;
-    
+
     }
     function Rectangle1() {
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 30.
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
         circle.fillColor = 'red';
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Check whether the mouse position intersects with the
             // bounding box of the item:
@@ -11913,28 +11913,28 @@ function APIReferenceExamples() {
                 circle.fillColor = 'red';
             }
         }
-    
+
     }
     function Rectangle2() {
-        
+
         // All newly created paths will inherit these styles:
         paper.project.currentStyle = {
             fillColor: 'green',
             strokeColor: 'black'
         };
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 45.
         let largeCircle = new paper.Path.Circle(new paper.Point(80, 50), 45);
-        
+
         // Create a smaller circle shaped path in the same position
         // with a radius of 30.
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Move the circle to the position of the mouse:
             circle.position = event.point;
-        
+
             // Check whether the bounding box of the smaller circle
             // is contained within the bounding box of the larger item:
             if (largeCircle.bounds.contains(circle.bounds)) {
@@ -11947,28 +11947,28 @@ function APIReferenceExamples() {
                 largeCircle.fillColor = 'red';
             }
         }
-    
+
     }
     function Rectangle3() {
-        
+
         // All newly created paths will inherit these styles:
         paper.project.currentStyle = {
             fillColor: 'green',
             strokeColor: 'black'
         };
-        
+
         // Create a circle shaped path at {x: 80, y: 50}
         // with a radius of 45.
         let largeCircle = new paper.Path.Circle(new paper.Point(80, 50), 45);
-        
+
         // Create a smaller circle shaped path in the same position
         // with a radius of 30.
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 30);
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Move the circle to the position of the mouse:
             circle.position = event.point;
-        
+
             // Check whether the bounding box of the two circle
             // shaped paths intersect:
             if (largeCircle.bounds.intersects(circle.bounds)) {
@@ -11981,147 +11981,147 @@ function APIReferenceExamples() {
                 largeCircle.fillColor = 'red';
             }
         }
-    
+
     }
     function Rectangle4() {
-        
+
         // Create two rectangles that overlap each other
         let size = new paper.Size(50, 50);
         let rectangle1 = new paper.Rectangle(new paper.Point(25, 15), size);
         let rectangle2 = new paper.Rectangle(new paper.Point(50, 40), size);
-        
+
         // The rectangle that represents the intersection of the
         // two rectangles:
         let intersected = rectangle1.intersect(rectangle2);
-        
+
         // To visualize the intersecting of the rectangles, we will
         // create rectangle shaped paths using the Path.Rectangle
         // constructor.
-        
+
         // Have all newly created paths inherit a black stroke:
         paper.project.currentStyle.strokeColor = 'black';
-        
+
         // Create two rectangle shaped paths using the abstract rectangles
         // we created before:
         new paper.Path.Rectangle(rectangle1);
         new paper.Path.Rectangle(rectangle2);
-        
+
         // Create a path that represents the intersected rectangle,
         // and fill it with red:
         let intersectionPath = new paper.Path.Rectangle(intersected);
         intersectionPath.fillColor = 'red';
-    
+
     }
     function Segment0() {
-        
+
         let handleIn = new paper.Point(-80, -100);
         let handleOut = new paper.Point(80, 100);
-        
+
         let firstPoint = new paper.Point(100, 50);
         let firstSegment = new paper.Segment(firstPoint, undefined, handleOut);
-        
+
         let secondPoint = new paper.Point(300, 50);
         let secondSegment = new paper.Segment(secondPoint, handleIn, undefined);
-        
+
         let path = new paper.Path([firstSegment, secondSegment]);
         path.strokeColor = 'black';
-    
+
     }
     function Segment1() {
-        
+
         let firstSegment = new paper.Segment({
             point: [100, 50],
             handleOut: [80, 100]
         });
-        
+
         let secondSegment = new paper.Segment({
             point: [300, 50],
             handleIn: [-80, -100]
         });
-        
+
         let path = new paper.Path({
             segments: [firstSegment, secondSegment],
             strokeColor: 'black'
         });
-    
+
     }
     function Segment2() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40
         });
-        
+
         // Select the third segment point:
         path.segments[2].selected = true;
-    
+
     }
     function Shape0() {
-        
+
         let shape = paper.Shape.Circle(new paper.Point(80, 50), 30);
         shape.strokeColor = 'black';
-    
+
     }
     function Shape1() {
-        
+
         let shape = paper.Shape.Circle({
             center: [80, 50],
             radius: 30,
             strokeColor: 'black'
         });
-    
+
     }
     function Shape2() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(60, 60));
         let shape = paper.Shape.Rectangle(rectangle);
         shape.strokeColor = 'black';
-    
+
     }
     function Shape3() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(60, 60));
         let cornerSize = new paper.Size(10, 10);
         let shape = paper.Shape.Rectangle([rectangle, cornerSize]);
         shape.strokeColor = 'black';
-    
+
     }
     function Shape4() {
-        
+
         let point = new paper.Point(20, 20);
         let size = new paper.Size(60, 60);
         let shape = paper.Shape.Rectangle(point, size);
         shape.strokeColor = 'black';
-    
+
     }
     function Shape5() {
-        
+
         let from = new paper.Point(20, 20);
         let to = new paper.Point(80, 80);
         let shape = paper.Shape.Rectangle(from, to);
         shape.strokeColor = 'black';
-    
+
     }
     function Shape6() {
-        
+
         let shape = paper.Shape.Rectangle({
             point: [20, 20],
             size: [60, 60],
             strokeColor: 'black'
         });
-    
+
     }
     function Shape7() {
-        
+
         let shape = paper.Shape.Rectangle({
             from: [20, 20],
             to: [80, 80],
             strokeColor: 'black'
         });
-    
+
     }
     function Shape8() {
-        
+
         let shape = paper.Shape.Rectangle({
             rectangle: {
                 topLeft: [20, 20],
@@ -12129,62 +12129,62 @@ function APIReferenceExamples() {
             },
             strokeColor: 'black'
         });
-    
+
     }
     function Shape9() {
-        
+
         let shape = paper.Shape.Rectangle({
          topLeft: [20, 20],
             bottomRight: [80, 80],
             radius: 10,
             strokeColor: 'black'
         });
-    
+
     }
     function Shape10() {
-        
+
         let rectangle = new paper.Rectangle(new paper.Point(20, 20), new paper.Size(180, 60));
         let shape = paper.Shape.Ellipse(rectangle);
         shape.fillColor = 'black';
-    
+
     }
     function Shape11() {
-        
+
         let shape = paper.Shape.Ellipse({
             point: [20, 20],
             size: [180, 60],
             fillColor: 'black'
         });
-    
+
     }
     function Shape12() {
-        
+
         let shape = paper.Shape.Ellipse({
             center: [110, 50],
             radius: [90, 30],
             fillColor: 'black'
         });
-    
+
     }
     function Shape13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function Shape14() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -12194,89 +12194,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function Shape15() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function Shape16() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function Shape17() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function Shape18() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function Shape19() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -12284,110 +12284,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function Shape20() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function Shape21() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function Shape22() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function Shape23() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function Shape24() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function Shape25() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function Shape26() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Shape27() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -12395,36 +12395,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Shape28() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Shape29() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -12432,44 +12432,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Shape30() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Shape31() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Shape32() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -12481,39 +12481,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function Shape33() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function Shape34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Shape35() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -12524,63 +12524,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Shape36() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function Shape37() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Shape38() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Shape39() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -12591,32 +12591,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Shape40() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Shape41() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -12627,142 +12627,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function Shape42() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function Shape43() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function Shape44() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function Shape45() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function Shape46() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function Shape47() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function Shape48() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function Shape49() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -12770,7 +12770,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -12782,28 +12782,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function Shape50() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function Shape51() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -12811,16 +12811,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function Shape52() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -12828,13 +12828,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function Shape53() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -12842,13 +12842,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function Shape54() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -12856,13 +12856,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function Shape55() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -12870,7 +12870,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -12878,14 +12878,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function Shape56() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -12893,7 +12893,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -12901,53 +12901,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function Shape57() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function Shape58() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function Shape59() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -12957,10 +12957,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function Shape60() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -12969,7 +12969,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -12978,14 +12978,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function Shape61() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -12994,17 +12994,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function Shape62() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -13013,14 +13013,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function Shape63() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -13029,14 +13029,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function Shape64() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -13045,14 +13045,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function Shape65() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -13061,24 +13061,24 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Style0() {
-        
+
         let path = new paper.Path.Circle(new paper.Point(80, 50), 30);
         path.style = {
             fillColor: new paper.Color(1, 0, 0),
             strokeColor: 'black',
             strokeWidth: 5
         };
-    
+
     }
     function Style1() {
-        
+
         let text = new paper.PointText(paper.view.center);
         text.content = 'Hello world.';
         text.style = {
@@ -13088,22 +13088,22 @@ function APIReferenceExamples() {
             fillColor: 'red',
             justification: 'center'
         };
-    
+
     }
     function Style2() {
-        
+
         let path1 = new paper.Path.Circle({
             center: [100, 50],
             radius: 30
         });
-        
+
         let path2 = new paper.Path.Rectangle({
             from: [170, 20],
             to: [230, 80]
         });
-        
+
         let group = new paper.Group([path1, path2]);
-        
+
         // All styles set on a group are automatically
         // set on the children of the group:
         group.style = {
@@ -13112,97 +13112,97 @@ function APIReferenceExamples() {
             strokeWidth: 4,
             strokeCap: 'round'
         };
-    
+
     }
     function Style3() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 35);
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Style4() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 35);
-        
+
         // Set its stroke color to black:
         circle.strokeColor = 'black';
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function Style5() {
-        
+
         let line = new paper.Path([new paper.Point(80, 50), new paper.Point(420, 50)]);
         line.strokeColor = 'black';
         line.strokeWidth = 20;
-        
+
         // Select the path, so we can see where the stroke is formed:
         line.selected = true;
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function Style6() {
-        
+
         let path = new paper.Path();
         path.add(new paper.Point(80, 100));
         path.add(new paper.Point(120, 40));
         path.add(new paper.Point(160, 100));
         path.strokeColor = 'black';
         path.strokeWidth = 20;
-        
+
         // Select the path, so we can see where the stroke is formed:
         path.selected = true;
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function Style7() {
-        
+
         let path = new paper.Path.Circle(new paper.Point(80, 50), 40);
         path.strokeWidth = 2;
         path.strokeColor = 'black';
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function Style8() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle(new paper.Point(80, 50), 35);
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function Style9() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -13214,38 +13214,38 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function SymbolDefinition0() {
-        
+
         let path = new paper.Path.Star(new paper.Point(0, 0), 6, 5, 13);
         path.style = {
             fillColor: 'white',
             strokeColor: 'black'
         };
-        
+
         // Create a symbol definition from the path:
         let definition = new paper.Symbol(path);
-        
+
         // Place 100 instances of the symbol definition:
         for (let i = 0; i < 100; i++) {
             // Place an instance of the symbol definition in the project:
             let instance = definition.place();
-        
+
             // Move the instance to a random position within the paper.view:
             instance.position = paper.Point.random().multiply(new paper.Point(paper.view.size));
-        
+
             // Rotate the instance by a random amount between
             // 0 and 360 degrees:
             instance.rotate(Math.random() * 360);
-        
+
             // Scale the instance between 0.25 and 1:
             instance.scale(0.25 + Math.random() * 0.75);
         }
-    
+
     }
     function SymbolItem0() {
-        
+
         let path = new paper.Path.Star({
             center: new paper.Point(0, 0),
             points: 6,
@@ -13254,46 +13254,46 @@ function APIReferenceExamples() {
             fillColor: 'white',
             strokeColor: 'black'
         });
-        
+
         // Create a symbol definition from the path:
         let definition = new paper.Symbol(path);
-        
+
         // Place 100 instances of the symbol:
         for (let i = 0; i < 100; i++) {
             // Place an instance of the symbol in the project:
             let instance = new paper.PlacedSymbol(definition);
-        
+
             // Move the instance to a random position within the paper.view:
             instance.position = paper.Point.random().multiply(new paper.Point(paper.view.size));
-        
+
             // Rotate the instance by a random amount between
             // 0 and 360 degrees:
             instance.rotate(Math.random() * 360);
-        
+
             // Scale the instance between 0.25 and 1:
             instance.scale(0.25 + Math.random() * 0.75);
         }
-    
+
     }
     function SymbolItem1() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function SymbolItem2() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -13303,89 +13303,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function SymbolItem3() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function SymbolItem4() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function SymbolItem5() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function SymbolItem6() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function SymbolItem7() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -13393,110 +13393,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function SymbolItem8() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function SymbolItem9() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function SymbolItem10() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function SymbolItem11() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function SymbolItem12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function SymbolItem13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function SymbolItem14() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function SymbolItem15() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -13504,36 +13504,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function SymbolItem16() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function SymbolItem17() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -13541,44 +13541,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function SymbolItem18() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function SymbolItem19() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function SymbolItem20() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -13590,39 +13590,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function SymbolItem21() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function SymbolItem22() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function SymbolItem23() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -13633,63 +13633,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function SymbolItem24() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function SymbolItem25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function SymbolItem26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function SymbolItem27() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -13700,32 +13700,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function SymbolItem28() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function SymbolItem29() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -13736,142 +13736,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function SymbolItem30() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function SymbolItem31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function SymbolItem32() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function SymbolItem33() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function SymbolItem34() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function SymbolItem35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function SymbolItem36() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function SymbolItem37() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -13879,7 +13879,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -13891,28 +13891,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function SymbolItem38() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function SymbolItem39() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -13920,16 +13920,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function SymbolItem40() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -13937,13 +13937,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function SymbolItem41() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -13951,13 +13951,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function SymbolItem42() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -13965,13 +13965,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function SymbolItem43() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -13979,7 +13979,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -13987,14 +13987,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function SymbolItem44() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -14002,7 +14002,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -14010,53 +14010,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function SymbolItem45() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function SymbolItem46() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function SymbolItem47() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path) {
@@ -14066,10 +14066,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function SymbolItem48() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path) {
                 this.fillColor = 'red';
@@ -14078,7 +14078,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -14087,14 +14087,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function SymbolItem49() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -14103,17 +14103,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function SymbolItem50() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -14122,14 +14122,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function SymbolItem51() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -14138,14 +14138,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function SymbolItem52() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -14154,14 +14154,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function SymbolItem53() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -14170,56 +14170,56 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function TextItem0() {
-        
+
         // Create a point-text item at {x: 30, y: 30}:
         let text = new paper.PointText(new paper.Point(30, 30));
         text.fillColor = 'black';
-        
+
         // Set the content of the text item:
         text.content = 'Hello world';
-    
+
     }
     function TextItem1() {
-        
+
         // Create a point-text item at {x: 30, y: 30}:
         let text = new paper.PointText(new paper.Point(30, 30));
         text.fillColor = 'black';
-        
+
         text.content = 'Move your mouse over the paper.view, to see its position';
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Each time the mouse is moved, set the content of
             // the point text to describe the position of the mouse:
             text.content = 'Your position is: ' + event.point.toString();
         }
-    
+
     }
     function TextItem2() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and add path to it as a child:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'red';
-    
+
     }
     function TextItem3() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 30
@@ -14229,89 +14229,89 @@ function APIReferenceExamples() {
             strokeColor: 'red',
             strokeWidth: 5
         };
-    
+
     }
     function TextItem4() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(180, 50),
             radius: 20
         });
-        
+
         // Copy the path style of path:
         path2.style = path.style;
-    
+
     }
     function TextItem5() {
-        
+
         let myStyle = {
             fillColor: 'red',
             strokeColor: 'blue',
             strokeWidth: 4
         };
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 30
         });
         path.style = myStyle;
-        
+
         let path2 = new paper.Path.Circle({
             center: new paper.Point(150, 50),
             radius: 20
         });
         path2.style = myStyle;
-    
+
     }
     function TextItem6() {
-        
+
         let path = new paper.Path.Circle({
             center: [50, 50],
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Hide the path:
         path.visible = false;
-    
+
     }
     function TextItem7() {
-        
+
         // Create a white rectangle in the background
         // with the same dimensions as the paper.view:
         let background = new paper.Path.Rectangle(paper.view.bounds);
         background.fillColor = 'white';
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
             fillColor: 'blue'
         });
-        
+
         // Set the blend mode of circle2:
         circle2.blendMode = 'multiply';
-    
+
     }
     function TextItem8() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
             fillColor: 'red'
         });
-        
+
         let circle2 = new paper.Path.Circle({
             center: new paper.Point(120, 50),
             radius: 35,
@@ -14319,110 +14319,110 @@ function APIReferenceExamples() {
             strokeColor: 'green',
             strokeWidth: 10
         });
-        
+
         // Make circle2 50% transparent:
         circle2.opacity = 0.5;
-    
+
     }
     function TextItem9() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         path.selected = true; // Select the path
-    
+
     }
     function TextItem10() {
-        
+
         // Create a circle at position { x: 10, y: 10 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(10, 10),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle to { x: 20, y: 20 }
         circle.position = new paper.Point(20, 20);
-        
+
         // Move the circle 100 points to the right and 50 points down
         circle.position = circle.position.add(new paper.Point(100, 50));
-    
+
     }
     function TextItem11() {
-        
+
         // Create a circle at position { x: 20, y: 20 }
         let circle = new paper.Path.Circle({
             center: new paper.Point(20, 20),
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Move the circle 100 points to the right
         circle.position.x += 100;
-    
+
     }
     function TextItem12() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // Access the path through the group's children array:
         group.children[0].fillColor = 'red';
-    
+
     }
     function TextItem13() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
         // Set the name of the path:
         path.name = 'example';
-        
+
         // Create a group and move the path into it:
         let group = new paper.Group();
         group.addChild(path);
-        
+
         // The path can be accessed by name:
         group.getItem('example').fillColor = 'orange';
-    
+
     }
     function TextItem14() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         let group = new paper.Group();
         group.children = [path];
-        
+
         // The path is the first child of the group:
         group.firstChild.fillColor = 'green';
-    
+
     }
     function TextItem15() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set its stroke color to RGB red:
         circle.strokeColor = new paper.Color(1, 0, 0);
-    
+
     }
     function TextItem16() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
@@ -14430,36 +14430,36 @@ function APIReferenceExamples() {
             radius: 35,
             strokeColor: 'red'
         });
-        
+
         // Set its stroke width to 10:
         circle.strokeWidth = 10;
-    
+
     }
     function TextItem17() {
-        
+
         let line = new paper.Path({
             segments: [[80, 50], [420, 50]],
             strokeColor: 'black',
             strokeWidth: 20,
             selected: true
         });
-        
+
         // Set the stroke cap of the line to be round:
         line.strokeCap = 'round';
-        
+
         // Copy the path and set its stroke cap to be square:
         let line2 = line.clone();
         line2.position.y += 50;
         line2.strokeCap = 'square';
-        
+
         // Make another copy and set its stroke cap to be butt:
         line2 = line.clone();
         line2.position.y += 100;
         line2.strokeCap = 'butt';
-    
+
     }
     function TextItem18() {
-        
+
         let path = new paper.Path({
             segments: [[80, 100], [120, 40], [160, 100]],
             strokeColor: 'black',
@@ -14467,44 +14467,44 @@ function APIReferenceExamples() {
             // Select the path, in order to see where the stroke is formed:
             selected: true
         });
-        
+
         let path2 = path.clone();
         path2.position.x += path2.bounds.width * 1.5;
         path2.strokeJoin = 'round';
-        
+
         let path3 = path2.clone();
         path3.position.x += path3.bounds.width * 1.5;
         path3.strokeJoin = 'bevel';
-    
+
     }
     function TextItem19() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 40,
             strokeWidth: 2,
             strokeColor: 'black'
         });
-        
+
         // Set the dashed stroke to [10pt dash, 4pt gap]:
         path.dashArray = [10, 4];
-    
+
     }
     function TextItem20() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 35:
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         // Set the fill color of the circle to RGB red:
         circle.fillColor = new paper.Color(1, 0, 0);
-    
+
     }
     function TextItem21() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35,
@@ -14516,39 +14516,39 @@ function APIReferenceExamples() {
             // Offset the shadow by { x: 5, y: 5 }
             shadowOffset: new paper.Point(5, 5)
         });
-    
+
     }
     function TextItem22() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         path.onFrame = function(this:paper.Path) {
             // Every frame, rotate the path by 3 degrees:
             this.rotate(3);
         }
-    
+
     }
     function TextItem23() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is pressed on the item,
         // set its fill color to red:
         path.onMouseDown = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function TextItem24() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -14559,63 +14559,63 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is pressed on the item, remove it:
             path.onMouseDown = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function TextItem25() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 50,
             fillColor: 'blue'
         });
-        
+
         // Install a drag event handler that moves the path along.
         path.onMouseDrag = function(this:paper.Path, event:paper.MouseEvent) {
             path.position = path.position.add(event.delta);
         }
-    
+
     }
     function TextItem26() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is released over the item,
         // set its fill color to red:
         path.onMouseUp = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function TextItem27() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is clicked on the item,
         // set its fill color to red:
         path.onClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function TextItem28() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -14626,32 +14626,32 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse clicks on the item, remove it:
             path.onClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function TextItem29() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse is double clicked on the item,
         // set its fill color to red:
         path.onDoubleClick = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function TextItem30() {
-        
+
         // Loop 30 times:
         for (let i = 0; i < 30; i++) {
             // Create a circle shaped path at a random position
@@ -14662,142 +14662,142 @@ function APIReferenceExamples() {
                 fillColor: 'black',
                 strokeColor: 'white'
             });
-        
+
             // When the mouse is double clicked on the item, remove it:
             path.onDoubleClick = function(this:paper.Path) {
                 this.remove();
             }
         }
-    
+
     }
     function TextItem31() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
             let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             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(this:paper.Path) {
             this.opacity = Math.random();
         }
-    
+
     }
     function TextItem32() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.onMouseEnter = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'black';
         }
-    
+
     }
     function TextItem33() {
-        
+
         function enter(this:paper.Path) {
             this.fillColor = 'red';
         }
-        
+
         function leave(this:paper.Path) {
             this.fillColor = 'black';
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
             let path = new paper.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;
         }
-    
+
     }
     function TextItem34() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse leaves the item, set its fill color to red:
         path.onMouseLeave = function(this:paper.Path) {
             this.fillColor = 'red';
         }
-    
+
     }
     function TextItem35() {
-        
+
         let circle = new paper.Path.Circle({
             center: [80, 50],
             radius: 35
         });
-        
+
         circle.set({
             strokeColor: 'red',
             strokeWidth: 10,
             fillColor: 'black',
             selected: true
         });
-    
+
     }
     function TextItem36() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 10,
             fillColor: 'red'
         });
-        
+
         // Make 20 copies of the circle:
         for (let i = 0; i < 20; i++) {
             let copy = circle.clone();
-        
+
             // Distribute the copies horizontally, so we can see them:
             copy.position.x += i * copy.bounds.width;
         }
-    
+
     }
     function TextItem37() {
-        
+
         let circle = new paper.Path.Circle({
             center: [50, 50],
             radius: 5,
             fillColor: 'red'
         });
-        
+
         // Create a rasterized version of the path:
         let raster = circle.rasterize();
-        
+
         // Move it 100pt to the right:
         raster.position.x += 100;
-        
+
         // Scale the path and the raster by 300%, so we can compare them:
         circle.scale(5);
         raster.scale(5);
-    
+
     }
     function TextItem38() {
-        
+
         let path = new paper.Path.Star({
             center: [50, 50],
             points: 12,
@@ -14805,7 +14805,7 @@ function APIReferenceExamples() {
             radius2: 40,
             fillColor: 'black'
         });
-        
+
         // Whenever the user presses the mouse:
         function onMouseDown(event:paper.ToolEvent) {
             // If the position of the mouse is within the path,
@@ -14817,28 +14817,28 @@ function APIReferenceExamples() {
                 path.fillColor = 'black';
             }
         }
-    
+
     }
     function TextItem39() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
         let path = new paper.Path.Rectangle(new paper.Point(80, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         // Rotate the path by 30 degrees:
         path.rotate(30);
-    
+
     }
     function TextItem40() {
-        
+
         // Create a rectangle shaped path with its top left
         // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
         let topLeft = new paper.Point(175, 50);
         let size = new paper.Size(100, 100);
         let path = new paper.Path.Rectangle(topLeft, size);
         path.fillColor = 'black';
-        
+
         // Draw a circle shaped path in the center of the paper.view,
         // to show the rotation point:
         let circle = new paper.Path.Circle({
@@ -14846,16 +14846,16 @@ function APIReferenceExamples() {
             radius: 5,
             fillColor: 'white'
         });
-        
+
         // Each frame rotate the path 3 degrees around the center point
         // of the paper.view:
         function onFrame(event:paper.IFrameEvent) {
             path.rotate(3, paper.view.center);
         }
-    
+
     }
     function TextItem41() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -14863,13 +14863,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path by 150% from its center point
         circle.scale(1.5);
-    
+
     }
     function TextItem42() {
-        
+
         // Create a circle shaped path at { x: 80, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -14877,13 +14877,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path 150% from its bottom left corner
         circle.scale(1.5, circle.bounds.bottomLeft);
-    
+
     }
     function TextItem43() {
-        
+
         // Create a circle shaped path at { x: 100, y: 50 }
         // with a radius of 20:
         let circle = new paper.Path.Circle({
@@ -14891,13 +14891,13 @@ function APIReferenceExamples() {
             radius: 20,
             fillColor: 'red'
         });
-        
+
         // Scale the path horizontally by 300%
         circle.scale(3, 1);
-    
+
     }
     function TextItem44() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -14905,7 +14905,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -14913,14 +14913,14 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds);
-    
+
     }
     function TextItem45() {
-        
+
         // Create a rectangle shaped path with its top left corner
         // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
         let path = new paper.Path.Rectangle({
@@ -14928,7 +14928,7 @@ function APIReferenceExamples() {
             size: [75, 50],
             fillColor: 'black'
         });
-        
+
         // Create a circle shaped path with its center at {x: 80, y: 50}
         // and a radius of 30.
         let circlePath = new paper.Path.Circle({
@@ -14936,53 +14936,53 @@ function APIReferenceExamples() {
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the circlePath to the bounding rectangle of
         // the rectangular path:
         circlePath.fitBounds(path.bounds, true);
-    
+
     }
     function TextItem46() {
-        
+
         let path = new paper.Path.Circle({
             center: [80, 50],
             radius: 30,
             fillColor: 'red'
         });
-        
+
         // Fit the path to the bounding rectangle of the paper.view:
         path.fitBounds(paper.view.bounds);
-    
+
     }
     function TextItem47() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25,
             fillColor: 'black'
         });
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on('mouseenter', function(this:paper.Path) {
             this.fillColor = 'red';
         });
-        
+
         // When the mouse leaves the item, set its fill color to black:
         path.on('mouseleave', function(this:paper.Path) {
             this.fillColor = 'black';
         });
-    
+
     }
     function TextItem48() {
-        
+
         // Create a circle shaped path at the center of the paper.view:
         let path = new paper.Path.Circle({
             center: paper.view.center,
             radius: 25
         });
         path.fillColor = 'black';
-        
+
         // When the mouse enters the item, set its fill color to red:
         path.on({
             mouseenter: function(this:paper.Path, event:paper.MouseEvent) {
@@ -14992,10 +14992,10 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         });
-    
+
     }
     function TextItem49() {
-        
+
         let pathHandlers = {
             mouseenter: function(this:paper.Path, event:paper.MouseEvent) {
                 this.fillColor = 'red';
@@ -15004,7 +15004,7 @@ function APIReferenceExamples() {
                 this.fillColor = 'black';
             }
         }
-        
+
         // When the mouse is pressed:
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the position of the mouse:
@@ -15013,14 +15013,14 @@ function APIReferenceExamples() {
                 radius: 25,
                 fillColor: 'black'
             });
-        
+
             // Attach the handers inside the object literal to the path:
             path.on(pathHandlers);
         }
-    
+
     }
     function TextItem50() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -15029,17 +15029,17 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path on the next onMouseDrag or onMouseDown event:
             path.removeOn({
                 drag: true,
                 down: true
             });
         }
-    
+
     }
     function TextItem51() {
-        
+
         function onMouseMove(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -15048,14 +15048,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next move event, automatically remove the path:
             path.removeOnMove();
         }
-    
+
     }
     function TextItem52() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -15064,14 +15064,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, next time the mouse is pressed:
             path.removeOnDown();
         }
-    
+
     }
     function TextItem53() {
-        
+
         function onMouseDrag(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -15080,14 +15080,14 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // On the next drag event, automatically remove the path:
             path.removeOnDrag();
         }
-    
+
     }
     function TextItem54() {
-        
+
         function onMouseDown(event:paper.ToolEvent) {
             // Create a circle shaped path at the mouse position,
             // with a radius of 10:
@@ -15096,35 +15096,35 @@ function APIReferenceExamples() {
                 radius: 10,
                 fillColor: 'black'
             });
-        
+
             // Remove the path, when the mouse is released:
             path.removeOnUp();
         }
-    
+
     }
     function Tool0() {
-        
+
         let path:paper.Path;
-        
+
         // Only execute onMouseDrag when the mouse
         // has moved at least 10 points:
         paper.tool.minDistance = 10;
-        
+
         paper.tool.onMouseDown = function(this:paper.Tool, event:paper.ToolEvent) {
             // Create a new path every time the mouse is clicked
             path = new paper.Path();
             path.add(event.point);
             path.strokeColor = 'black';
         }
-        
+
         paper.tool.onMouseDrag = function(this:paper.Tool, event:paper.ToolEvent) {
             // Add a point to the path every time the mouse is dragged
             path.add(event.point);
         }
-    
+
     }
     function Tool1() {
-        
+
         paper.tool.onMouseDown = function(event:paper.ToolEvent) {
             // Create a new circle shaped path with a radius of 10
             // at the position of the mouse (event.point):
@@ -15134,39 +15134,39 @@ function APIReferenceExamples() {
                 fillColor: 'black'
             });
         }
-    
+
     }
     function Tool2() {
-        
+
         // Create an empty path:
         let path = new paper.Path({
             strokeColor: 'black'
         });
-        
+
         paper.tool.onMouseDrag = function(event:paper.ToolEvent) {
             // Add a segment to the path at the position of the mouse:
             path.add(event.point);
         }
-    
+
     }
     function Tool3() {
-        
+
         // Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
         let path = new paper.Path.Circle({
             center: [0, 0],
             radius: 10,
             fillColor: 'black'
         });
-        
+
         paper.tool.onMouseMove = function(event:paper.ToolEvent) {
             // Whenever the user moves the mouse, move the path
             // to that position:
             path.position = event.point;
         }
-    
+
     }
     function Tool4() {
-        
+
         paper.tool.onMouseUp = function(event:paper.ToolEvent) {
             // Create a new circle shaped path with a radius of 10
             // at the position of the mouse (event.point):
@@ -15176,43 +15176,43 @@ function APIReferenceExamples() {
                 fillColor: 'black'
             });
         }
-    
+
     }
     function Tool5() {
-        
+
         // Create a circle shaped path:
         let path = new paper.Path.Circle({
             center: new paper.Point(50, 50),
             radius: 30,
             fillColor: 'red'
         });
-        
+
         paper.tool.onKeyDown = function(event:paper.KeyEvent) {
             if (event.key == 'space') {
                 // Scale the path by 110%:
                 path.scale(1.1);
-        
+
                 // Prevent the key event from bubbling
                 return false;
             }
         }
-    
+
     }
     function View0() {
-        
+
         // Create a rectangle shaped path with its top left point at:
         // {x: 50, y: 25} and a size of {width: 50, height: 50}
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         paper.view.onFrame = function(event:paper.IFrameEvent) {
             // Every frame, rotate the path by 3 degrees:
             path.rotate(3);
         }
-    
+
     }
     function View1() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
 
@@ -15220,45 +15220,55 @@ function APIReferenceExamples() {
             // Every frame, rotate the path by 3 degrees:
             path.rotate(3);
         };
-        
+
         paper.view.on('frame', frameHandler);
-    
+
     }
     function View2() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         let frameHandler = function(event:paper.IFrameEvent) {
             // Every frame, rotate the path by 3 degrees:
             path.rotate(3);
         };
-        
+
         paper.view.on({
             frame: frameHandler
         });
-    
+
     }
     function View3() {
-        
+
         let path = new paper.Path.Rectangle(new paper.Point(50, 25), new paper.Size(50, 50));
         path.fillColor = 'black';
-        
+
         let frameHandler = function(event:paper.IFrameEvent) {
             // Every frame, rotate the path by 3 degrees:
             path.rotate(3);
         };
-        
+
         paper.view.on({
             frame: frameHandler
         });
-        
+
         // When the user presses the mouse,
         // detach the frame handler from the paper.view:
         function onMouseDown(event:paper.ToolEvent) {
             paper.view.off('frame');
         }
-    
+
+    }
+
+    function export_import_test() {
+        const src = new paper.Point(50, 25);
+        const str = src.exportJSON(); // "['Point', 50, 25]"
+        // not type save import
+        const res0 = paper.Point.importJSON(str);
+        // type save import to existing object
+        // if object is not same type with json, object will not be updated
+        const res1 = new paper.Point(0, 0);
+        paper.Point.importJSON(str, res1);
     }
-    
 }