Published npm

build/escher.js

@@ -1266,8 +1266,9 @@
 	 * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
 	 * @param {Viewport} viewport Viewport applied to the canvas.
 	 * @param {Element} canvas DOM canvas element where the content is being drawn.
+	 * @param {Renderer} renderer Renderer object being used to draw the object into the canvas.
 	 */
-	Object2D.prototype.transform = function(context, viewport, canvas)
+	Object2D.prototype.transform = function(context, viewport, canvas, renderer)
 	{
 		this.globalMatrix.tranformContext(context);
 	};
@@ -1442,8 +1443,6 @@
 			ignoreViewport: this.ignoreViewport,
 			saveContextState: this.saveContextState,
 			restoreContextState: this.restoreContextState,
-			pointerInside: this.pointerInside,
-			beingDragged: this.beingDragged,
 			children: [],
 			masks: []
 		};
@@ -1495,8 +1494,6 @@
 		this.ignoreViewport = data.ignoreViewport;
 		this.saveContextState = data.saveContextState;
 		this.restoreContextState = data.restoreContextState;
-		this.pointerInside = data.pointerInside;
-		this.beingDragged = data.beingDragged;
 
 		for(var i = 0; i < this.masks.length; i++)
 		{
@@ -1562,16 +1559,22 @@
 	{
 		/**
 		 * Indicates if this key is currently pressed.
+		 *
+		 * @type {boolean}
 		 */
 		this.pressed = false;
 
 		/**
 		 * Indicates if this key was just pressed.
+		 *
+		 * @type {boolean}
 		 */
 		this.justPressed = false;
 		
 		/**
 		 * Indicates if this key was just released.
+		 *
+		 * @type {boolean}
 		 */
 		this.justReleased = false;
 	}
@@ -1584,6 +1587,8 @@
 
 	/**
 	 * Update Key status based on new key state.
+	 *
+	 * @param {number} action Key action that was performed.
 	 */
 	Key.prototype.update = function(action)
 	{
@@ -1655,36 +1660,54 @@
 
 		/**
 		 * Array with pointer buttons status.
+		 *
+		 * @type {number[]}
 		 */
 		this.keys = new Array(5);
 
 		/**
 		 * Pointer position inside of the window (coordinates in window space).
+		 *
+		 * This value is accumulated from multiple mouse triggered events between updated.
+		 *
+		 * @type {Vector2}
 		 */
 		this.position = new Vector2(0, 0);
 
 		/**
-		 * Pointer movement (coordinates in window space).
+		 * Pointer movement (coordinates in window space). Since the last update.
+		 *
+		 * This value is accumulated from multiple mouse triggered events between updated.
+		 *
+		 * @type {Vector2}
 		 */
 		this.delta = new Vector2(0, 0);
 
 		/**
-		 * Pointer scroll wheel movement.
+		 * Pointer scroll wheel movement, since the last update.
+		 *
+		 * @type {number}
 		 */
 		this.wheel = 0;
 		
 		/**
 		 * Indicates a button of the pointer was double clicked.
+		 *
+		 * @type {boolean}
 		 */
 		this.doubleClicked = new Array(5);
 
 		/**
 		 * DOM element where to attach the pointer events.
+		 *
+		 * @type {Element}
 		 */
 		this.domElement = (domElement !== undefined) ? domElement : window;
 
 		/**
 		 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
+		 *
+		 * @type {Element}
 		 */
 		this.canvas = null;
 		if(canvas !== undefined)
@@ -1695,9 +1718,11 @@
 		/**
 		 * Event manager responsible for updating the raw data variables.
 		 *
-		 * Diferent events are used depending on the host platform.
+		 * Different events are used depending on the host platform.
 		 *
 		 * When the update method is called the raw data is reset.
+		 *
+		 * @type {EventManager}
 		 */
 		this.events = new EventManager();
 
@@ -1817,33 +1842,48 @@
 
 	/**
 	 * Left pointer button.
+	 *
+	 * @static
+	 * @type {number}
 	 */
 	Pointer.LEFT = 0;
 
 	/**
 	 * Middle pointer button.
+	 *
+	 * @static
+	 * @type {number}
 	 */
 	Pointer.MIDDLE = 1;
 
 	/**
 	 * Right pointer button.
+	 *
+	 * @static
+	 * @type {number}
 	 */
 	Pointer.RIGHT = 2;
 
 	/**
 	 * Back pointer navigation button.
+	 *
+	 * @static
+	 * @type {number}
 	 */
 	Pointer.BACK = 3;
 
 	/**
 	 * Forward pointer navigation button.
+	 *
+	 * @static
+	 * @type {number}
 	 */
 	Pointer.FORWARD = 4;
 
 	/**
 	 * Element to be used for coordinates calculation relative to that canvas.
 	 * 
-	 * @param {DOM} canvas Canvas to be attached to the Pointer instance
+	 * @param {DOM} element Canvas to be attached to the Pointer instance
 	 */
 	Pointer.setCanvas = function(element)
 	{
@@ -1918,8 +1958,6 @@
 
 	/**
 	 * Update pointer position.
-	 *
-	 * Automatically called by the runtime.
 	 * 
 	 * @param {Number} x
 	 * @param {Number} y
@@ -1943,8 +1981,6 @@
 
 	/**
 	 * Update a pointer button.
-	 * 
-	 * Automatically called by the runtime.
 	 *
 	 * @param {Number} button
 	 * @param {Number} action
@@ -1959,6 +1995,8 @@
 
 	/**
 	 * Update pointer buttons state, position, wheel and delta synchronously.
+	 *
+	 * Should be called every frame on the update loop before reading any values from the pointer.
 	 */
 	Pointer.update = function()
 	{
@@ -2016,7 +2054,9 @@
 	};
 
 	/**
-	 * Create pointer events.
+	 * Create pointer events to collect input data.
+	 *
+	 * Should be called before using the pointer object.
 	 */
 	Pointer.create = function()
 	{
@@ -2024,7 +2064,9 @@
 	};
 
 	/**
-	 * Dispose pointer events.
+	 * Dispose pointer events, should be called after the objects is no longer required.
+	 *
+	 * If not called leaves the window events created leaving a memory/code leak.
 	 */
 	Pointer.dispose = function()
 	{
@@ -2153,6 +2195,8 @@
 	{
 		/**
 		 * Viewport being controlled by this object.
+		 *
+		 * @type {Viewport}
 		 */
 		this.viewport = viewport;
 
@@ -2160,6 +2204,8 @@
 		 * Button used to drag and viewport around.
 		 *
 		 * On touch enabled devices the touch event is represented as a LEFT button.
+		 *
+		 * @type {number}
 		 */
 		this.dragButton = Pointer.RIGHT;
 
@@ -2167,6 +2213,8 @@
 		 * Is set to true allow the viewport to be scalled.
 		 *
 		 * Scaling is performed using the pointer scroll.
+		 *
+		 * @type {boolean}
 		 */
 		this.allowScale = true;
 
@@ -2174,6 +2222,8 @@
 		 * Flag to indicate if the viewport should move when scalling.
 		 *
 		 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+		 *
+		 * @type {boolean}
 		 */
 		this.moveOnScale = false;
 
@@ -2181,6 +2231,8 @@
 		 * If true allows the viewport to be rotated.
 		 *
 		 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
+		 *
+		 * @type {boolean}
 		 */
 		this.allowRotation = true;
 
@@ -2188,11 +2240,15 @@
 		 * Value of the initial point of rotation if the viewport is being rotated.
 		 *
 		 * Is set to null when the viewport is not being rotated.
+		 *
+		 * @type {Vector2 | null}
 		 */
 		this.rotationPoint = null;
 
 		/**
 		 * Initial rotation of the viewport.
+		 *
+		 * @type {number}
 		 */
 		this.rotationInitial = 0;
 	}
@@ -2202,7 +2258,7 @@
 	 *
 	 * Should be called every frame before rendering.
 	 *
-	 * @param {Pointer} pointer
+	 * @param {Pointer} pointer Pointer used to control the viewport.
 	 */
 	ViewportControls.prototype.update = function(pointer)
 	{	
@@ -2244,9 +2300,9 @@
 			}
 			else
 			{
-				var pointer = pointer.position.clone();
-				pointer.sub(this.rotationPoint);
-				this.viewport.rotation = this.rotationInitial + pointer.angle();
+				var point = pointer.position.clone();
+				point.sub(this.rotationPoint);
+				this.viewport.rotation = this.rotationInitial + point.angle();
 				this.viewport.matrixNeedsUpdate = true;
 			}
 		}
@@ -2361,13 +2417,28 @@
 		 * Canvas DOM element, the user needs to manage the canvas state.
 		 *
 		 * The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
+		 *
+		 * @type {Element}
 		 */
 		this.canvas = canvas;
 
+		/**
+		 * Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.
+		 *
+		 * If no division is defined the canvas parent element is used by default to place these objects.
+		 *
+		 * The DOM container to be used can be obtained using the getDomContainer() method.
+		 *
+		 * @type {Element}
+		 */
+		this.container = null;
+
 		/**
 		 * Canvas 2D rendering context used to draw content.
 		 *
 		 * The options passed thought the constructor are applied to the context created.
+		 *
+		 * @type {CanvasRenderingContext2D}
 		 */
 		this.context = this.canvas.getContext("2d", {alpha: options.alpha});
 		this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
@@ -2378,6 +2449,8 @@
 		 * Pointer input handler object, automatically updated by the renderer.
 		 *
 		 * The pointer is attached to the DOM window and to the canvas provided by the user.
+		 *
+		 * @type {Pointer}
 		 */
 		this.pointer = new Pointer(window, this.canvas);
 
@@ -2385,10 +2458,24 @@
 		 * Indicates if the canvas should be automatically cleared before new frame is drawn.
 		 *
 		 * If set to false the user should clear the frame before drawing.
+		 *
+		 * @type {boolean}
 		 */
 		this.autoClear = true;
 	}
 
+	/**
+	 * Get the DOM container to be used to store DOM and SVG objects.
+	 *
+	 * Can be set using the container attribute, by default the canvas parent element is used.
+	 *
+	 * @returns {Element} DOM element selected for objects.
+	 */
+	Renderer.prototype.getDomContainer = function()
+	{
+		return this.container !== null ? this.container : this.canvas.parentElement;
+	};
+
 	/**
 	 * Creates a infinite render loop to render the group into a viewport each frame.
 	 *
@@ -2640,7 +2727,7 @@
 					viewport.matrix.setContextTransform(this.context);
 				}
 
-				masks[j].transform(this.context, viewport, this.canvas);
+				masks[j].transform(this.context, viewport, this.canvas, this);
 				masks[j].clip(this.context, viewport, this.canvas);
 			}
 
@@ -2655,7 +2742,7 @@
 			}
 
 			// Apply the object transform to the canvas context
-			objects[i].transform(this.context, viewport, this.canvas);
+			objects[i].transform(this.context, viewport, this.canvas, this);
 
 			// Style the canvas context
 			if(objects[i].style !== null)
@@ -3630,12 +3717,12 @@
 		}
 	};
 
-	DOM.prototype.transform = function(context, viewport, canvas)
+	DOM.prototype.transform = function(context, viewport, canvas, renderer)
 	{
 		// Check if the DOM element parent is null
 		if(this.parentElement === null)
 		{
-			this.parentElement = canvas.parentElement;
+			this.parentElement = renderer.getDomContainer();
 			this.parentElement.appendChild(this.element);
 		}
 

build/escher.module.js

@@ -1260,8 +1260,9 @@ Object2D.prototype.updateMatrix = function(context)
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
  * @param {Element} canvas DOM canvas element where the content is being drawn.
+ * @param {Renderer} renderer Renderer object being used to draw the object into the canvas.
  */
-Object2D.prototype.transform = function(context, viewport, canvas)
+Object2D.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	this.globalMatrix.tranformContext(context);
 };
@@ -1436,8 +1437,6 @@ Object2D.prototype.serialize = function(recursive)
 		ignoreViewport: this.ignoreViewport,
 		saveContextState: this.saveContextState,
 		restoreContextState: this.restoreContextState,
-		pointerInside: this.pointerInside,
-		beingDragged: this.beingDragged,
 		children: [],
 		masks: []
 	};
@@ -1489,8 +1488,6 @@ Object2D.prototype.parse = function(data, root)
 	this.ignoreViewport = data.ignoreViewport;
 	this.saveContextState = data.saveContextState;
 	this.restoreContextState = data.restoreContextState;
-	this.pointerInside = data.pointerInside;
-	this.beingDragged = data.beingDragged;
 
 	for(var i = 0; i < this.masks.length; i++)
 	{
@@ -1556,16 +1553,22 @@ function Key()
 {
 	/**
 	 * Indicates if this key is currently pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.pressed = false;
 
 	/**
 	 * Indicates if this key was just pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.justPressed = false;
 	
 	/**
 	 * Indicates if this key was just released.
+	 *
+	 * @type {boolean}
 	 */
 	this.justReleased = false;
 }
@@ -1578,6 +1581,8 @@ Key.prototype.constructor = Key;
 
 /**
  * Update Key status based on new key state.
+ *
+ * @param {number} action Key action that was performed.
  */
 Key.prototype.update = function(action)
 {
@@ -1649,36 +1654,54 @@ function Pointer(domElement, canvas)
 
 	/**
 	 * Array with pointer buttons status.
+	 *
+	 * @type {number[]}
 	 */
 	this.keys = new Array(5);
 
 	/**
 	 * Pointer position inside of the window (coordinates in window space).
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Pointer movement (coordinates in window space).
+	 * Pointer movement (coordinates in window space). Since the last update.
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.delta = new Vector2(0, 0);
 
 	/**
-	 * Pointer scroll wheel movement.
+	 * Pointer scroll wheel movement, since the last update.
+	 *
+	 * @type {number}
 	 */
 	this.wheel = 0;
 	
 	/**
 	 * Indicates a button of the pointer was double clicked.
+	 *
+	 * @type {boolean}
 	 */
 	this.doubleClicked = new Array(5);
 
 	/**
 	 * DOM element where to attach the pointer events.
+	 *
+	 * @type {Element}
 	 */
 	this.domElement = (domElement !== undefined) ? domElement : window;
 
 	/**
 	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = null;
 	if(canvas !== undefined)
@@ -1689,9 +1712,11 @@ function Pointer(domElement, canvas)
 	/**
 	 * Event manager responsible for updating the raw data variables.
 	 *
-	 * Diferent events are used depending on the host platform.
+	 * Different events are used depending on the host platform.
 	 *
 	 * When the update method is called the raw data is reset.
+	 *
+	 * @type {EventManager}
 	 */
 	this.events = new EventManager();
 
@@ -1811,33 +1836,48 @@ Pointer.prototype.constructor = Pointer;
 
 /**
  * Left pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.LEFT = 0;
 
 /**
  * Middle pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.MIDDLE = 1;
 
 /**
  * Right pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.RIGHT = 2;
 
 /**
  * Back pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.BACK = 3;
 
 /**
  * Forward pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.FORWARD = 4;
 
 /**
  * Element to be used for coordinates calculation relative to that canvas.
  * 
- * @param {DOM} canvas Canvas to be attached to the Pointer instance
+ * @param {DOM} element Canvas to be attached to the Pointer instance
  */
 Pointer.setCanvas = function(element)
 {
@@ -1912,8 +1952,6 @@ Pointer.buttonJustReleased = function(button)
 
 /**
  * Update pointer position.
- *
- * Automatically called by the runtime.
  * 
  * @param {Number} x
  * @param {Number} y
@@ -1937,8 +1975,6 @@ Pointer.updatePosition = function(x, y, xDiff, yDiff)
 
 /**
  * Update a pointer button.
- * 
- * Automatically called by the runtime.
  *
  * @param {Number} button
  * @param {Number} action
@@ -1953,6 +1989,8 @@ Pointer.updateKey = function(button, action)
 
 /**
  * Update pointer buttons state, position, wheel and delta synchronously.
+ *
+ * Should be called every frame on the update loop before reading any values from the pointer.
  */
 Pointer.update = function()
 {
@@ -2010,7 +2048,9 @@ Pointer.update = function()
 };
 
 /**
- * Create pointer events.
+ * Create pointer events to collect input data.
+ *
+ * Should be called before using the pointer object.
  */
 Pointer.create = function()
 {
@@ -2018,7 +2058,9 @@ Pointer.create = function()
 };
 
 /**
- * Dispose pointer events.
+ * Dispose pointer events, should be called after the objects is no longer required.
+ *
+ * If not called leaves the window events created leaving a memory/code leak.
  */
 Pointer.dispose = function()
 {
@@ -2147,6 +2189,8 @@ function ViewportControls(viewport)
 {
 	/**
 	 * Viewport being controlled by this object.
+	 *
+	 * @type {Viewport}
 	 */
 	this.viewport = viewport;
 
@@ -2154,6 +2198,8 @@ function ViewportControls(viewport)
 	 * Button used to drag and viewport around.
 	 *
 	 * On touch enabled devices the touch event is represented as a LEFT button.
+	 *
+	 * @type {number}
 	 */
 	this.dragButton = Pointer.RIGHT;
 
@@ -2161,6 +2207,8 @@ function ViewportControls(viewport)
 	 * Is set to true allow the viewport to be scalled.
 	 *
 	 * Scaling is performed using the pointer scroll.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowScale = true;
 
@@ -2168,6 +2216,8 @@ function ViewportControls(viewport)
 	 * Flag to indicate if the viewport should move when scalling.
 	 *
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+	 *
+	 * @type {boolean}
 	 */
 	this.moveOnScale = false;
 
@@ -2175,6 +2225,8 @@ function ViewportControls(viewport)
 	 * If true allows the viewport to be rotated.
 	 *
 	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowRotation = true;
 
@@ -2182,11 +2234,15 @@ function ViewportControls(viewport)
 	 * Value of the initial point of rotation if the viewport is being rotated.
 	 *
 	 * Is set to null when the viewport is not being rotated.
+	 *
+	 * @type {Vector2 | null}
 	 */
 	this.rotationPoint = null;
 
 	/**
 	 * Initial rotation of the viewport.
+	 *
+	 * @type {number}
 	 */
 	this.rotationInitial = 0;
 }
@@ -2196,7 +2252,7 @@ function ViewportControls(viewport)
  *
  * Should be called every frame before rendering.
  *
- * @param {Pointer} pointer
+ * @param {Pointer} pointer Pointer used to control the viewport.
  */
 ViewportControls.prototype.update = function(pointer)
 {	
@@ -2238,9 +2294,9 @@ ViewportControls.prototype.update = function(pointer)
 		}
 		else
 		{
-			var pointer = pointer.position.clone();
-			pointer.sub(this.rotationPoint);
-			this.viewport.rotation = this.rotationInitial + pointer.angle();
+			var point = pointer.position.clone();
+			point.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + point.angle();
 			this.viewport.matrixNeedsUpdate = true;
 		}
 	}
@@ -2355,13 +2411,28 @@ function Renderer(canvas, options)
 	 * Canvas DOM element, the user needs to manage the canvas state.
 	 *
 	 * The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = canvas;
 
+	/**
+	 * Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.
+	 *
+	 * If no division is defined the canvas parent element is used by default to place these objects.
+	 *
+	 * The DOM container to be used can be obtained using the getDomContainer() method.
+	 *
+	 * @type {Element}
+	 */
+	this.container = null;
+
 	/**
 	 * Canvas 2D rendering context used to draw content.
 	 *
 	 * The options passed thought the constructor are applied to the context created.
+	 *
+	 * @type {CanvasRenderingContext2D}
 	 */
 	this.context = this.canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
@@ -2372,6 +2443,8 @@ function Renderer(canvas, options)
 	 * Pointer input handler object, automatically updated by the renderer.
 	 *
 	 * The pointer is attached to the DOM window and to the canvas provided by the user.
+	 *
+	 * @type {Pointer}
 	 */
 	this.pointer = new Pointer(window, this.canvas);
 
@@ -2379,10 +2452,24 @@ function Renderer(canvas, options)
 	 * Indicates if the canvas should be automatically cleared before new frame is drawn.
 	 *
 	 * If set to false the user should clear the frame before drawing.
+	 *
+	 * @type {boolean}
 	 */
 	this.autoClear = true;
 }
 
+/**
+ * Get the DOM container to be used to store DOM and SVG objects.
+ *
+ * Can be set using the container attribute, by default the canvas parent element is used.
+ *
+ * @returns {Element} DOM element selected for objects.
+ */
+Renderer.prototype.getDomContainer = function()
+{
+	return this.container !== null ? this.container : this.canvas.parentElement;
+};
+
 /**
  * Creates a infinite render loop to render the group into a viewport each frame.
  *
@@ -2634,7 +2721,7 @@ Renderer.prototype.update = function(object, viewport)
 				viewport.matrix.setContextTransform(this.context);
 			}
 
-			masks[j].transform(this.context, viewport, this.canvas);
+			masks[j].transform(this.context, viewport, this.canvas, this);
 			masks[j].clip(this.context, viewport, this.canvas);
 		}
 
@@ -2649,7 +2736,7 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		// Apply the object transform to the canvas context
-		objects[i].transform(this.context, viewport, this.canvas);
+		objects[i].transform(this.context, viewport, this.canvas, this);
 
 		// Style the canvas context
 		if(objects[i].style !== null)
@@ -3624,12 +3711,12 @@ DOM.prototype.onRemove = function()
 	}
 };
 
-DOM.prototype.transform = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	// Check if the DOM element parent is null
 	if(this.parentElement === null)
 	{
-		this.parentElement = canvas.parentElement;
+		this.parentElement = renderer.getDomContainer();
 		this.parentElement.appendChild(this.element);
 	}
 

docs/AnimationTimer.html

@@ -614,7 +614,7 @@ If the timer is not stopped the loop will keep running using processing power an
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BezierCurve.html

@@ -519,7 +519,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1521,7 +1521,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1588,7 +1588,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1655,7 +1655,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1722,7 +1722,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1789,7 +1789,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1856,7 +1856,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1992,7 +1992,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2059,7 +2059,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2126,7 +2126,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2193,7 +2193,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2264,7 +2264,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3194,7 +3194,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4871,7 +4871,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -5040,7 +5040,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5328,7 +5328,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5386,7 +5386,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5498,6 +5498,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5540,7 +5563,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5876,7 +5899,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box.html

@@ -502,7 +502,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1402,7 +1402,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1469,7 +1469,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1536,7 +1536,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1603,7 +1603,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1670,7 +1670,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1737,7 +1737,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1804,7 +1804,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1873,7 +1873,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1940,7 +1940,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2007,7 +2007,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2074,7 +2074,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2145,7 +2145,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3062,7 +3062,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4449,7 +4449,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4618,7 +4618,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4906,7 +4906,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4964,7 +4964,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5076,6 +5076,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5118,7 +5141,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5454,7 +5477,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Box2.html

@@ -3271,7 +3271,7 @@ Store the result in this object.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxMask.html

@@ -512,7 +512,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1358,7 +1358,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1425,7 +1425,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1492,7 +1492,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1559,7 +1559,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1626,7 +1626,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1693,7 +1693,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1760,7 +1760,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1829,7 +1829,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1896,7 +1896,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1963,7 +1963,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2030,7 +2030,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2101,7 +2101,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2954,7 +2954,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4533,7 +4533,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4702,7 +4702,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4990,7 +4990,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5048,7 +5048,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5160,6 +5160,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5202,7 +5225,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5538,7 +5561,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Circle.html

@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1340,7 +1340,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1407,7 +1407,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1474,7 +1474,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1541,7 +1541,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1608,7 +1608,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1675,7 +1675,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1742,7 +1742,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1811,7 +1811,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1878,7 +1878,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1945,7 +1945,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2012,7 +2012,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2083,7 +2083,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3062,7 +3062,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4449,7 +4449,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4618,7 +4618,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4906,7 +4906,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4964,7 +4964,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5076,6 +5076,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5118,7 +5141,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5454,7 +5477,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -491,7 +491,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1339,7 +1339,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1406,7 +1406,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1473,7 +1473,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1540,7 +1540,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1607,7 +1607,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1674,7 +1674,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1743,7 +1743,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1810,7 +1810,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1877,7 +1877,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -1948,7 +1948,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2937,7 +2937,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4417,7 +4417,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4679,7 +4679,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4967,7 +4967,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5025,7 +5025,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5137,6 +5137,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5179,7 +5202,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5515,7 +5538,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -692,7 +692,7 @@ Format [target, event, callback, active]
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/FileUtils.html

@@ -49,7 +49,9 @@
 
 
 <div class="description">
-    File utils is used to read and write files.

Can be used alongside with object serialization to store and load objects from file.
+    File utils is used to read and write files.
+
+Can be used alongside with object serialization to store and load objects from file.
 </div>
 
 
@@ -340,7 +342,9 @@
 
 
 <div class="description">
-    Open file chooser dialog window for the user to select files stored in the system.

The files selected are retrieved using the onLoad callback that receives a array of File objects.
+    Open file chooser dialog window for the user to select files stored in the system.
+
+The files selected are retrieved using the onLoad callback that receives a array of File objects.
 </div>
 
 
@@ -508,7 +512,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Graph.html

@@ -95,7 +95,7 @@ Graph data is composed of X, Y values.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line13">line 13</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -277,7 +277,7 @@ Graph data is composed of X, Y values.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line20">line 20</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line20">line 20</a>
     </li></ul></dd>
     
 
@@ -418,7 +418,7 @@ The array should store numeric values.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line52">line 52</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line52">line 52</a>
     </li></ul></dd>
     
 
@@ -566,7 +566,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -628,7 +628,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line35">line 35</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line35">line 35</a>
     </li></ul></dd>
     
 
@@ -1083,7 +1083,7 @@ The layer value is considered first.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line30">line 30</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line30">line 30</a>
     </li></ul></dd>
     
 
@@ -1459,7 +1459,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line45">line 45</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -1521,7 +1521,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line40">line 40</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line40">line 40</a>
     </li></ul></dd>
     
 
@@ -1588,7 +1588,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1655,7 +1655,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1722,7 +1722,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1789,7 +1789,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1856,7 +1856,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1990,7 +1990,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -2059,7 +2059,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2126,7 +2126,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2193,7 +2193,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2260,7 +2260,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2331,7 +2331,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3175,7 +3175,7 @@ Used to prevent duplicate serialization data on custom objects. Should be set fa
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="objects_Graph.js.html">objects/Graph.js</a>, <a href="objects_Graph.js.html#line25">line 25</a>
+        <a href="objects_chart_Graph.js.html">objects/chart/Graph.js</a>, <a href="objects_chart_Graph.js.html#line25">line 25</a>
     </li></ul></dd>
     
 
@@ -3246,7 +3246,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4633,7 +4633,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4802,7 +4802,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5090,7 +5090,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5148,7 +5148,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5260,6 +5260,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5302,7 +5325,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5638,7 +5661,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -347,7 +347,7 @@ When the object is dragged is changes the parent object rotation.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -549,7 +549,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1385,7 +1385,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1452,7 +1452,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1519,7 +1519,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1586,7 +1586,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1653,7 +1653,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1720,7 +1720,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1787,7 +1787,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1856,7 +1856,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1990,7 +1990,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2057,7 +2057,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2128,7 +2128,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2981,7 +2981,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4368,7 +4368,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4537,7 +4537,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4825,7 +4825,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5022,7 +5022,7 @@ Automatically sets the box size to match the image.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5134,6 +5134,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5176,7 +5199,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5512,7 +5535,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

@@ -143,7 +143,7 @@
 
         
             
-<h4 class="name" id="justPressed"><span class="type-signature"></span>justPressed<span class="type-signature"></span></h4>
+<h4 class="name" id="justPressed"><span class="type-signature"></span>justPressed<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -154,6 +154,16 @@
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -187,7 +197,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line16">line 16</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line20">line 20</a>
     </li></ul></dd>
     
 
@@ -205,7 +215,7 @@
 
         
             
-<h4 class="name" id="justReleased"><span class="type-signature"></span>justReleased<span class="type-signature"></span></h4>
+<h4 class="name" id="justReleased"><span class="type-signature"></span>justReleased<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -216,6 +226,16 @@
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -249,7 +269,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line21">line 21</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line27">line 27</a>
     </li></ul></dd>
     
 
@@ -267,7 +287,7 @@
 
         
             
-<h4 class="name" id="pressed"><span class="type-signature"></span>pressed<span class="type-signature"></span></h4>
+<h4 class="name" id="pressed"><span class="type-signature"></span>pressed<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -278,6 +298,16 @@
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -311,7 +341,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line11">line 11</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line13">line 13</a>
     </li></ul></dd>
     
 
@@ -391,7 +421,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line74">line 74</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line82">line 82</a>
     </li></ul></dd>
     
 
@@ -479,7 +509,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line64">line 64</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line72">line 72</a>
     </li></ul></dd>
     
 
@@ -515,7 +545,7 @@
     
 
     
-    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(action)</span><span class="type-signature"></span></h4>
     
 
     
@@ -534,6 +564,55 @@
 
 
 
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>action</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Key action that was performed.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -567,7 +646,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line33">line 33</a>
+        <a href="input_Key.js.html">input/Key.js</a>, <a href="input_Key.js.html#line41">line 41</a>
     </li></ul></dd>
     
 
@@ -619,7 +698,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -516,7 +516,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1436,7 +1436,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1503,7 +1503,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1570,7 +1570,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1637,7 +1637,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1704,7 +1704,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1771,7 +1771,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1838,7 +1838,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1907,7 +1907,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1974,7 +1974,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2041,7 +2041,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2108,7 +2108,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2179,7 +2179,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3104,7 +3104,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4565,7 +4565,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4734,7 +4734,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5022,7 +5022,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5080,7 +5080,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5192,6 +5192,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5234,7 +5257,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5570,7 +5593,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Mask.html

@@ -444,7 +444,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1218,7 +1218,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1285,7 +1285,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1352,7 +1352,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1419,7 +1419,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1486,7 +1486,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1553,7 +1553,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1620,7 +1620,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1689,7 +1689,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1756,7 +1756,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1823,7 +1823,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -1890,7 +1890,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -1961,7 +1961,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2814,7 +2814,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4388,7 +4388,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4557,7 +4557,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4845,7 +4845,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4903,7 +4903,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5015,6 +5015,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5057,7 +5080,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5393,7 +5416,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

@@ -2868,7 +2868,7 @@ Adds position over the transformation already stored in the matrix.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/MultiLineText.html

@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1593,7 +1593,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1660,7 +1660,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1727,7 +1727,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1794,7 +1794,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1861,7 +1861,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1928,7 +1928,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1995,7 +1995,7 @@ Can be set to null to be ignored.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -2064,7 +2064,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2131,7 +2131,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2198,7 +2198,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2265,7 +2265,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2336,7 +2336,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3266,7 +3266,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4888,7 +4888,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -5057,7 +5057,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5345,7 +5345,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5403,7 +5403,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5515,6 +5515,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5557,7 +5580,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5893,7 +5916,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Node.html

@@ -49,7 +49,11 @@
 
 
 <div class="description">
-    Node objects can be connected between them to create graphs.

Each node contains inputs, outputs and a set of attributes containing their state. Inputs can be connected to outputs of other nodes, and vice-versa.

This class implements node basic functionality, the logic to connect node and define inputs/outputs of the nodes.
+    Node objects can be connected between them to create graphs.
+
+Each node contains inputs, outputs and a set of attributes containing their state. Inputs can be connected to outputs of other nodes, and vice-versa.
+
+This class implements node basic functionality, the logic to connect node and define inputs/outputs of the nodes.
 </div>
 
 
@@ -505,7 +509,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1487,7 +1491,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1554,7 +1558,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1621,7 +1625,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1688,7 +1692,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1755,7 +1759,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1822,7 +1826,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1889,7 +1893,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1958,7 +1962,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2025,7 +2029,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2092,7 +2096,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2159,7 +2163,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2230,7 +2234,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2794,7 +2798,9 @@ The world position of the object is affected by its parent transform.
 
 
 <div class="description">
-    This method should be used for the node to register their socket inputs/outputs.

It is called automatically after the node is added to the node graph to create sockets.
+    This method should be used for the node to register their socket inputs/outputs.
+
+It is called automatically after the node is added to the node graph to create sockets.
 </div>
 
 
@@ -3363,7 +3369,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -5432,7 +5438,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -5601,7 +5607,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5889,7 +5895,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5947,7 +5953,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -6059,6 +6065,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -6101,7 +6130,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -6437,7 +6466,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/NodeConnector.html

@@ -49,7 +49,11 @@
 
 
 <div class="description">
-    Node connector is used to connect a output of a node to a input of another node.

Some nodes outputs might support multiple connections having an output connected to multiple inputs.

Data always goes from the output node to a input node.
+    Node connector is used to connect a output of a node to a input of another node.
+
+Some nodes outputs might support multiple connections having an output connected to multiple inputs.
+
+Data always goes from the output node to a input node.
 </div>
 
 
@@ -519,7 +523,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1598,7 +1602,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1665,7 +1669,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1732,7 +1736,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1799,7 +1803,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1866,7 +1870,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1933,7 +1937,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -2000,7 +2004,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -2069,7 +2073,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2136,7 +2140,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2203,7 +2207,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2270,7 +2274,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2341,7 +2345,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3343,7 +3347,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4886,7 +4890,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -5055,7 +5059,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5343,7 +5347,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5401,7 +5405,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5513,6 +5517,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5555,7 +5582,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5891,7 +5918,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/NodeGraph.html

@@ -49,7 +49,11 @@
 
 
 <div class="description">
-    Node graph object should be used as a container for node elements.

The node graph object specifies how the nodes are processed, each individual node can store and process data, the node graph specified how this information is processed.

All node elements are stored as children of the node graph.
+    Node graph object should be used as a container for node elements.
+
+The node graph object specifies how the nodes are processed, each individual node can store and process data, the node graph specified how this information is processed.
+
+All node elements are stored as children of the node graph.
 </div>
 
 
@@ -438,7 +442,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1212,7 +1216,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1279,7 +1283,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1346,7 +1350,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1413,7 +1417,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1480,7 +1484,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1547,7 +1551,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1614,7 +1618,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1683,7 +1687,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1750,7 +1754,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1817,7 +1821,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -1884,7 +1888,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -1955,7 +1959,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2808,7 +2812,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -3223,7 +3227,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Create and add a new node of specific node type to the graph.

Automatically finds an empty space as close as possible to other nodes to add this new node.
+    Create and add a new node of specific node type to the graph.
+
+Automatically finds an empty space as close as possible to other nodes to add this new node.
 </div>
 
 
@@ -4354,7 +4360,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4523,7 +4529,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4811,7 +4817,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4869,7 +4875,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4981,6 +4987,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5023,7 +5052,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5359,7 +5388,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/NodeSocket.html

@@ -49,7 +49,9 @@
 
 
 <div class="description">
-    Represents a node hook point. Is attached to the node element and represented visually.

Can be used as a node input, output or as a bidirectional connection.
+    Represents a node hook point. Is attached to the node element and represented visually.
+
+Can be used as a node input, output or as a bidirectional connection.
 </div>
 
 
@@ -278,7 +280,9 @@
 
 
 <div class="description">
-    Input hook can only be connected to an output.

Is used to read data from the output.
+    Input hook can only be connected to an output.
+
+Is used to read data from the output.
 </div>
 
 
@@ -350,7 +354,9 @@
 
 
 <div class="description">
-    Output hook can only be connected to an input.

Writes data to the output.
+    Output hook can only be connected to an input.
+
+Writes data to the output.
 </div>
 
 
@@ -499,7 +505,9 @@
 
 
 <div class="description">
-    Category of data available from this socket. Only sockets of the same category can be connected.

Should directly store the data type name (e.g. "string", "number", "Object", etc).
+    Category of data available from this socket. Only sockets of the same category can be connected.
+
+Should directly store the data type name (e.g. "string", "number", "Object", etc).
 </div>
 
 
@@ -648,7 +656,9 @@
 
 
 <div class="description">
-    Node connector used to connect this socket to another node socket.

Can be used to access the adjacent node. If the socket allows for multiple connections this array can have multiple elements.
+    Node connector used to connect this socket to another node socket.
+
+Can be used to access the adjacent node. If the socket allows for multiple connections this array can have multiple elements.
 </div>
 
 
@@ -792,7 +802,9 @@
 
 
 <div class="description">
-    Direction of the node hook, indicates the data flow of the socket.

Can be INPUT or OUTPUT.
+    Direction of the node hook, indicates the data flow of the socket.
+
+Can be INPUT or OUTPUT.
 </div>
 
 
@@ -988,7 +1000,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1855,7 +1867,9 @@ The matrix is updated before rendering the object, after the matrix is updated t
 
 
 <div class="description">
-    Allow to connect a OUTPUT node to multiple INPUT sockets.

A INPUT socket can only take one connection, this value is ignored for INPUT sockets.
+    Allow to connect a OUTPUT node to multiple INPUT sockets.
+
+A INPUT socket can only take one connection, this value is ignored for INPUT sockets.
 </div>
 
 
@@ -1999,7 +2013,9 @@ The matrix is updated before rendering the object, after the matrix is updated t
 
 
 <div class="description">
-    Node where this socket is attached to.

Should be used to get data from node GUI and from other sockets.
+    Node where this socket is attached to.
+
+Should be used to get data from node GUI and from other sockets.
 </div>
 
 
@@ -2114,7 +2130,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -2181,7 +2197,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -2248,7 +2264,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -2315,7 +2331,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -2382,7 +2398,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -2449,7 +2465,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -2516,7 +2532,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -2585,7 +2601,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -2652,7 +2668,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2719,7 +2735,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2786,7 +2802,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2857,7 +2873,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3846,7 +3862,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -3870,7 +3886,9 @@ Should be implemented by underlying classes.
 
 
 <div class="description">
-    Text object used to present the name of the socket.

Depending on the socket direction the text is aligned to the left or to the right.
+    Text object used to present the name of the socket.
+
+Depending on the socket direction the text is aligned to the left or to the right.
 </div>
 
 
@@ -4333,7 +4351,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Attach a node connector to this socket. Sets the correct input/output attributes on the socket and the connector.

Automatically adds the connector to the same parent and the node socket if no parent defined for the connector.
+    Attach a node connector to this socket. Sets the correct input/output attributes on the socket and the connector.
+
+Automatically adds the connector to the same parent and the node socket if no parent defined for the connector.
 </div>
 
 
@@ -4470,7 +4490,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Check if this node socket can have a new connector attached to it.

Otherwise it might be necessary to destroy old connectors before adding a new connector.
+    Check if this node socket can have a new connector attached to it.
+
+Otherwise it might be necessary to destroy old connectors before adding a new connector.
 </div>
 
 
@@ -4739,7 +4761,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Connect this node socket to another socket.

Sockets have to be compatible otherwise the connection cannot be made and an error will be thrown.
+    Connect this node socket to another socket.
+
+Sockets have to be compatible otherwise the connection cannot be made and an error will be thrown.
 </div>
 
 
@@ -4991,7 +5015,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Destroy all connectors attached to this socket.

Should be called when destroying the object or to clean up the object.
+    Destroy all connectors attached to this socket.
+
+Should be called when destroying the object or to clean up the object.
 </div>
 
 
@@ -5243,7 +5269,13 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.

For input nodes the value should be fetched trough the connector object that is connected to an output node elsewhere.

By default it the socket is an INPUT it gets the value trough the connector if available. Inputs will recursively propagate the method trough the graph to get their value.

If the socket is an OUTPUT or there is no connection the method returns null by default, in this case the method should be extended by implementations of this class to process data.
+    Get value stored or calculated in node socket, it should be the calculated from node logic, node inputs, user input, etc.
+
+For input nodes the value should be fetched trough the connector object that is connected to an output node elsewhere.
+
+By default it the socket is an INPUT it gets the value trough the connector if available. Inputs will recursively propagate the method trough the graph to get their value.
+
+If the socket is an OUTPUT or there is no connection the method returns null by default, in this case the method should be extended by implementations of this class to process data.
 </div>
 
 
@@ -5540,7 +5572,9 @@ The object is set as children of this object and the transformations applied to
 
 
 <div class="description">
-    Check if this socket is compatible (type and direction) with another socket.

For two sockets to be compatible the data flow should be correct (one input and a output) and they should carry the same data type.
+    Check if this socket is compatible (type and direction) with another socket.
+
+For two sockets to be compatible the data flow should be correct (one input and a output) and they should carry the same data type.
 </div>
 
 
@@ -6227,7 +6261,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -6396,7 +6430,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -6772,7 +6806,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -6830,7 +6864,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -6942,6 +6976,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -6984,7 +7041,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -7320,7 +7377,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.html

@@ -487,7 +487,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1211,7 +1211,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1273,7 +1273,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1335,7 +1335,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1397,7 +1397,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1459,7 +1459,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1521,7 +1521,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1583,7 +1583,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1647,7 +1647,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1709,7 +1709,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1771,7 +1771,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -1833,7 +1833,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -1899,7 +1899,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2697,7 +2697,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -3050,7 +3050,7 @@ First all objects instances are created to ensure that object trying to get refe
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line704">line 704</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line701">line 701</a>
     </li></ul></dd>
     
 
@@ -4359,7 +4359,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4523,7 +4523,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4801,7 +4801,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4859,7 +4859,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -4971,6 +4971,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5008,7 +5031,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5334,7 +5357,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -480,8 +480,9 @@ Object2D.prototype.updateMatrix = function(context)
  * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
  * @param {Viewport} viewport Viewport applied to the canvas.
  * @param {Element} canvas DOM canvas element where the content is being drawn.
+ * @param {Renderer} renderer Renderer object being used to draw the object into the canvas.
  */
-Object2D.prototype.transform = function(context, viewport, canvas)
+Object2D.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	this.globalMatrix.tranformContext(context);
 };
@@ -656,8 +657,6 @@ Object2D.prototype.serialize = function(recursive)
 		ignoreViewport: this.ignoreViewport,
 		saveContextState: this.saveContextState,
 		restoreContextState: this.restoreContextState,
-		pointerInside: this.pointerInside,
-		beingDragged: this.beingDragged,
 		children: [],
 		masks: []
 	};
@@ -709,8 +708,6 @@ Object2D.prototype.parse = function(data, root)
 	this.ignoreViewport = data.ignoreViewport;
 	this.saveContextState = data.saveContextState;
 	this.restoreContextState = data.restoreContextState;
-	this.pointerInside = data.pointerInside;
-	this.beingDragged = data.beingDragged;
 
 	for(var i = 0; i < this.masks.length; i++)
 	{
@@ -784,7 +781,7 @@ export {Object2D};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -561,7 +561,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1409,7 +1409,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1476,7 +1476,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1543,7 +1543,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1610,7 +1610,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1677,7 +1677,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1744,7 +1744,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1811,7 +1811,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1880,7 +1880,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1947,7 +1947,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2014,7 +2014,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2081,7 +2081,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2152,7 +2152,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3081,7 +3081,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4468,7 +4468,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4637,7 +4637,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4925,7 +4925,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5122,7 +5122,7 @@ Automatically sets the box size to match the image.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5234,6 +5234,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5276,7 +5299,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5612,7 +5635,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -217,7 +217,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id=".BACK"><span class="type-signature">(static) </span>BACK<span class="type-signature"></span></h4>
+<h4 class="name" id=".BACK"><span class="type-signature">(static) </span>BACK<span class="type-signature"> :number</span></h4>
 
 
 
@@ -228,6 +228,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -261,7 +271,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line205">line 205</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line237">line 237</a>
     </li></ul></dd>
     
 
@@ -279,7 +289,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id=".FORWARD"><span class="type-signature">(static) </span>FORWARD<span class="type-signature"></span></h4>
+<h4 class="name" id=".FORWARD"><span class="type-signature">(static) </span>FORWARD<span class="type-signature"> :number</span></h4>
 
 
 
@@ -290,6 +300,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -323,7 +343,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line210">line 210</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line245">line 245</a>
     </li></ul></dd>
     
 
@@ -341,7 +361,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id=".LEFT"><span class="type-signature">(static) </span>LEFT<span class="type-signature"></span></h4>
+<h4 class="name" id=".LEFT"><span class="type-signature">(static) </span>LEFT<span class="type-signature"> :number</span></h4>
 
 
 
@@ -352,6 +372,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -385,7 +415,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line190">line 190</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line213">line 213</a>
     </li></ul></dd>
     
 
@@ -403,7 +433,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id=".MIDDLE"><span class="type-signature">(static) </span>MIDDLE<span class="type-signature"></span></h4>
+<h4 class="name" id=".MIDDLE"><span class="type-signature">(static) </span>MIDDLE<span class="type-signature"> :number</span></h4>
 
 
 
@@ -414,6 +444,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -447,7 +487,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line195">line 195</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line221">line 221</a>
     </li></ul></dd>
     
 
@@ -465,7 +505,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id=".RIGHT"><span class="type-signature">(static) </span>RIGHT<span class="type-signature"></span></h4>
+<h4 class="name" id=".RIGHT"><span class="type-signature">(static) </span>RIGHT<span class="type-signature"> :number</span></h4>
 
 
 
@@ -476,6 +516,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -509,7 +559,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line200">line 200</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line229">line 229</a>
     </li></ul></dd>
     
 
@@ -527,7 +577,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
+<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"> :Element</span></h4>
 
 
 
@@ -538,6 +588,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Element</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -571,7 +631,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line58">line 58</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line76">line 76</a>
     </li></ul></dd>
     
 
@@ -589,17 +649,29 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id="delta"><span class="type-signature"></span>delta<span class="type-signature"></span></h4>
+<h4 class="name" id="delta"><span class="type-signature"></span>delta<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
 
 <div class="description">
-    Pointer movement (coordinates in window space).
+    Pointer movement (coordinates in window space). Since the last update.
+
+This value is accumulated from multiple mouse triggered events between updated.
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -633,7 +705,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line38">line 38</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line48">line 48</a>
     </li></ul></dd>
     
 
@@ -651,7 +723,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id="domElement"><span class="type-signature"></span>domElement<span class="type-signature"></span></h4>
+<h4 class="name" id="domElement"><span class="type-signature"></span>domElement<span class="type-signature"> :Element</span></h4>
 
 
 
@@ -662,6 +734,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Element</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -695,7 +777,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line53">line 53</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line69">line 69</a>
     </li></ul></dd>
     
 
@@ -713,7 +795,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id="doubleClicked"><span class="type-signature"></span>doubleClicked<span class="type-signature"></span></h4>
+<h4 class="name" id="doubleClicked"><span class="type-signature"></span>doubleClicked<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -724,6 +806,16 @@ It is responsible for synchronizing user input with the render of the graphics.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -757,7 +849,7 @@ It is responsible for synchronizing user input with the render of the graphics.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line48">line 48</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line62">line 62</a>
     </li></ul></dd>
     
 
@@ -775,7 +867,7 @@ It is responsible for synchronizing user input with the render of the graphics.
 
         
             
-<h4 class="name" id="events"><span class="type-signature"></span>events<span class="type-signature"></span></h4>
+<h4 class="name" id="events"><span class="type-signature"></span>events<span class="type-signature"> :<a href="EventManager.html">EventManager</a></span></h4>
 
 
 
@@ -783,13 +875,23 @@ It is responsible for synchronizing user input with the render of the graphics.
 <div class="description">
     Event manager responsible for updating the raw data variables.
 
-Diferent events are used depending on the host platform.
+Different events are used depending on the host platform.
 
 When the update method is called the raw data is reset.
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="EventManager.html">EventManager</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -823,7 +925,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line71">line 71</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line91">line 91</a>
     </li></ul></dd>
     
 
@@ -841,7 +943,7 @@ When the update method is called the raw data is reset.
 
         
             
-<h4 class="name" id="keys"><span class="type-signature"></span>keys<span class="type-signature"></span></h4>
+<h4 class="name" id="keys"><span class="type-signature"></span>keys<span class="type-signature"> :Array.&lt;number></span></h4>
 
 
 
@@ -852,6 +954,16 @@ When the update method is called the raw data is reset.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Array.&lt;number></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -885,7 +997,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line28">line 28</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line30">line 30</a>
     </li></ul></dd>
     
 
@@ -903,17 +1015,29 @@ When the update method is called the raw data is reset.
 
         
             
-<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"></span></h4>
+<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"> :<a href="Vector2.html">Vector2</a></span></h4>
 
 
 
 
 <div class="description">
     Pointer position inside of the window (coordinates in window space).
+
+This value is accumulated from multiple mouse triggered events between updated.
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -947,7 +1071,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line33">line 33</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line39">line 39</a>
     </li></ul></dd>
     
 
@@ -965,17 +1089,27 @@ When the update method is called the raw data is reset.
 
         
             
-<h4 class="name" id="wheel"><span class="type-signature"></span>wheel<span class="type-signature"></span></h4>
+<h4 class="name" id="wheel"><span class="type-signature"></span>wheel<span class="type-signature"> :number</span></h4>
 
 
 
 
 <div class="description">
-    Pointer scroll wheel movement.
+    Pointer scroll wheel movement, since the last update.
 </div>
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -1009,7 +1143,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line43">line 43</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line55">line 55</a>
     </li></ul></dd>
     
 
@@ -1138,7 +1272,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line261">line 261</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line296">line 296</a>
     </li></ul></dd>
     
 
@@ -1297,7 +1431,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line272">line 272</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line307">line 307</a>
     </li></ul></dd>
     
 
@@ -1456,7 +1590,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line283">line 283</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line318">line 318</a>
     </li></ul></dd>
     
 
@@ -1615,7 +1749,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line250">line 250</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line285">line 285</a>
     </li></ul></dd>
     
 
@@ -1681,7 +1815,9 @@ When the update method is called the raw data is reset.
 
 
 <div class="description">
-    Create pointer events.
+    Create pointer events to collect input data.
+
+Should be called before using the pointer object.
 </div>
 
 
@@ -1725,7 +1861,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line390">line 390</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line425">line 425</a>
     </li></ul></dd>
     
 
@@ -1769,7 +1905,9 @@ When the update method is called the raw data is reset.
 
 
 <div class="description">
-    Dispose pointer events.
+    Dispose pointer events, should be called after the objects is no longer required.
+
+If not called leaves the window events created leaving a memory/code leak.
 </div>
 
 
@@ -1813,7 +1951,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line398">line 398</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line435">line 435</a>
     </li></ul></dd>
     
 
@@ -1901,7 +2039,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line239">line 239</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line274">line 274</a>
     </li></ul></dd>
     
 
@@ -1959,7 +2097,7 @@ When the update method is called the raw data is reset.
     
 
     
-    <h4 class="name" id=".setCanvas"><span class="type-signature">(static) </span>setCanvas<span class="signature">(canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id=".setCanvas"><span class="type-signature">(static) </span>setCanvas<span class="signature">(element)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2003,7 +2141,7 @@ When the update method is called the raw data is reset.
 
         <tr>
             
-                <td class="name"><code>canvas</code></td>
+                <td class="name"><code>element</code></td>
             
 
             <td class="type">
@@ -2060,7 +2198,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line217">line 217</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line252">line 252</a>
     </li></ul></dd>
     
 
@@ -2105,6 +2243,8 @@ When the update method is called the raw data is reset.
 
 <div class="description">
     Update pointer buttons state, position, wheel and delta synchronously.
+
+Should be called every frame on the update loop before reading any values from the pointer.
 </div>
 
 
@@ -2148,7 +2288,7 @@ When the update method is called the raw data is reset.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line332">line 332</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line365">line 365</a>
     </li></ul></dd>
     
 
@@ -2193,8 +2333,6 @@ When the update method is called the raw data is reset.
 
 <div class="description">
     Update a pointer button.
-
-Automatically called by the runtime.
 </div>
 
 
@@ -2310,7 +2448,7 @@ Automatically called by the runtime.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line321">line 321</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line352">line 352</a>
     </li></ul></dd>
     
 
@@ -2355,8 +2493,6 @@ Automatically called by the runtime.
 
 <div class="description">
     Update pointer position.
-
-Automatically called by the runtime.
 </div>
 
 
@@ -2518,7 +2654,7 @@ Automatically called by the runtime.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line298">line 298</a>
+        <a href="input_Pointer.js.html">input/Pointer.js</a>, <a href="input_Pointer.js.html#line331">line 331</a>
     </li></ul></dd>
     
 
@@ -2570,7 +2706,7 @@ Automatically called by the runtime.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/QuadraticCurve.html

@@ -512,7 +512,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1286,7 +1286,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1353,7 +1353,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1420,7 +1420,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1487,7 +1487,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1554,7 +1554,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1621,7 +1621,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1688,7 +1688,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1757,7 +1757,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1824,7 +1824,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -1891,7 +1891,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -1958,7 +1958,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2029,7 +2029,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -2882,7 +2882,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4408,7 +4408,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4577,7 +4577,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -4865,7 +4865,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -4923,7 +4923,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5035,6 +5035,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5077,7 +5100,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5413,7 +5436,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -219,7 +219,7 @@ Input handling is also performed by the renderer (it is also used for the event
 
         
             
-<h4 class="name" id="autoClear"><span class="type-signature"></span>autoClear<span class="type-signature"></span></h4>
+<h4 class="name" id="autoClear"><span class="type-signature"></span>autoClear<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -232,6 +232,16 @@ If set to false the user should clear the frame before drawing.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -265,7 +275,7 @@ If set to false the user should clear the frame before drawing.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line58">line 58</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line77">line 77</a>
     </li></ul></dd>
     
 
@@ -283,7 +293,7 @@ If set to false the user should clear the frame before drawing.
 
         
             
-<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"></span></h4>
+<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"> :Element</span></h4>
 
 
 
@@ -296,6 +306,16 @@ The canvas size (width and height) should always match its actual display size (
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Element</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -329,7 +349,7 @@ The canvas size (width and height) should always match its actual display size (
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line34">line 34</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line36">line 36</a>
     </li></ul></dd>
     
 
@@ -347,7 +367,83 @@ The canvas size (width and height) should always match its actual display size (
 
         
             
-<h4 class="name" id="context"><span class="type-signature"></span>context<span class="type-signature"></span></h4>
+<h4 class="name" id="container"><span class="type-signature"></span>container<span class="type-signature"> :Element</span></h4>
+
+
+
+
+<div class="description">
+    Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.
+
+If no division is defined the canvas parent element is used by default to place these objects.
+
+The DOM container to be used can be obtained using the getDomContainer() method.
+</div>
+
+
+
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">Element</span>
+
+
+        </li>
+    </ul>
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line47">line 47</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="context"><span class="type-signature"></span>context<span class="type-signature"> :CanvasRenderingContext2D</span></h4>
 
 
 
@@ -360,6 +456,16 @@ The options passed thought the constructor are applied to the context created.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">CanvasRenderingContext2D</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -393,7 +499,7 @@ The options passed thought the constructor are applied to the context created.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line41">line 41</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line56">line 56</a>
     </li></ul></dd>
     
 
@@ -411,7 +517,7 @@ The options passed thought the constructor are applied to the context created.
 
         
             
-<h4 class="name" id="pointer"><span class="type-signature"></span>pointer<span class="type-signature"></span></h4>
+<h4 class="name" id="pointer"><span class="type-signature"></span>pointer<span class="type-signature"> :<a href="Pointer.html">Pointer</a></span></h4>
 
 
 
@@ -424,6 +530,16 @@ The pointer is attached to the DOM window and to the canvas provided by the user
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Pointer.html">Pointer</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -457,7 +573,7 @@ The pointer is attached to the DOM window and to the canvas provided by the user
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line51">line 51</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line68">line 68</a>
     </li></ul></dd>
     
 
@@ -636,7 +752,7 @@ The render loop can be accessed trough the animation timer returned. Should be s
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line73">line 73</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line104">line 104</a>
     </li></ul></dd>
     
 
@@ -748,7 +864,97 @@ Should be called if the renderer is no longer in use to prevent code/memory leak
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line98">line 98</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line129">line 129</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="getDomContainer"><span class="type-signature"></span>getDomContainer<span class="signature">()</span><span class="type-signature"> &rarr; {Element}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Get the DOM container to be used to store DOM and SVG objects.
+
+Can be set using the container attribute, by default the canvas parent element is used.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line87">line 87</a>
     </li></ul></dd>
     
 
@@ -773,6 +979,28 @@ Should be called if the renderer is no longer in use to prevent code/memory leak
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    DOM element selected for objects.
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Element</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -914,7 +1142,7 @@ Should be called at a fixed rate preferably using the requestAnimationFrame() me
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line115">line 115</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line146">line 146</a>
     </li></ul></dd>
     
 
@@ -966,7 +1194,7 @@ Should be called at a fixed rate preferably using the requestAnimationFrame() me
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -58,13 +58,28 @@ function Renderer(canvas, options)
 	 * Canvas DOM element, the user needs to manage the canvas state.
 	 *
 	 * The canvas size (width and height) should always match its actual display size (adjusted for the device pixel ratio).
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = canvas;
 
+	/**
+	 * Division where DOM and SVG objects should be placed at. This division should be perfectly aligned whit the canvas element.
+	 *
+	 * If no division is defined the canvas parent element is used by default to place these objects.
+	 *
+	 * The DOM container to be used can be obtained using the getDomContainer() method.
+	 *
+	 * @type {Element}
+	 */
+	this.container = null;
+
 	/**
 	 * Canvas 2D rendering context used to draw content.
 	 *
 	 * The options passed thought the constructor are applied to the context created.
+	 *
+	 * @type {CanvasRenderingContext2D}
 	 */
 	this.context = this.canvas.getContext("2d", {alpha: options.alpha});
 	this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
@@ -75,6 +90,8 @@ function Renderer(canvas, options)
 	 * Pointer input handler object, automatically updated by the renderer.
 	 *
 	 * The pointer is attached to the DOM window and to the canvas provided by the user.
+	 *
+	 * @type {Pointer}
 	 */
 	this.pointer = new Pointer(window, this.canvas);
 
@@ -82,10 +99,24 @@ function Renderer(canvas, options)
 	 * Indicates if the canvas should be automatically cleared before new frame is drawn.
 	 *
 	 * If set to false the user should clear the frame before drawing.
+	 *
+	 * @type {boolean}
 	 */
 	this.autoClear = true;
 }
 
+/**
+ * Get the DOM container to be used to store DOM and SVG objects.
+ *
+ * Can be set using the container attribute, by default the canvas parent element is used.
+ *
+ * @returns {Element} DOM element selected for objects.
+ */
+Renderer.prototype.getDomContainer = function()
+{
+	return this.container !== null ? this.container : this.canvas.parentElement;
+};
+
 /**
  * Creates a infinite render loop to render the group into a viewport each frame.
  *
@@ -337,7 +368,7 @@ Renderer.prototype.update = function(object, viewport)
 				viewport.matrix.setContextTransform(this.context);
 			}
 
-			masks[j].transform(this.context, viewport, this.canvas);
+			masks[j].transform(this.context, viewport, this.canvas, this);
 			masks[j].clip(this.context, viewport, this.canvas);
 		}
 
@@ -352,7 +383,7 @@ Renderer.prototype.update = function(object, viewport)
 		}
 
 		// Apply the object transform to the canvas context
-		objects[i].transform(this.context, viewport, this.canvas);
+		objects[i].transform(this.context, viewport, this.canvas, this);
 
 		// Style the canvas context
 		if(objects[i].style !== null)
@@ -390,7 +421,7 @@ export {Renderer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/RoundedBox.html

@@ -505,7 +505,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1415,7 +1415,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1482,7 +1482,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1549,7 +1549,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1616,7 +1616,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1683,7 +1683,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1750,7 +1750,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1817,7 +1817,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1886,7 +1886,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1953,7 +1953,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2020,7 +2020,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2087,7 +2087,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2158,7 +2158,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3152,7 +3152,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4791,7 +4791,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4960,7 +4960,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5248,7 +5248,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5306,7 +5306,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5418,6 +5418,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5460,7 +5483,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5796,7 +5819,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -440,7 +440,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line483">line 483</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line484">line 484</a>
     </li></ul></dd>
     
 
@@ -1430,7 +1430,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line525">line 525</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line526">line 526</a>
     </li></ul></dd>
     
 
@@ -1497,7 +1497,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line591">line 591</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line592">line 592</a>
     </li></ul></dd>
     
 
@@ -1564,7 +1564,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line575">line 575</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line576">line 576</a>
     </li></ul></dd>
     
 
@@ -1631,7 +1631,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line599">line 599</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line600">line 600</a>
     </li></ul></dd>
     
 
@@ -1698,7 +1698,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line583">line 583</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line584">line 584</a>
     </li></ul></dd>
     
 
@@ -1765,7 +1765,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line518">line 518</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line519">line 519</a>
     </li></ul></dd>
     
 
@@ -1832,7 +1832,7 @@ The matrix is updated before rendering the object, after the matrix is updated t
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line510">line 510</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line511">line 511</a>
     </li></ul></dd>
     
 
@@ -1901,7 +1901,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line551">line 551</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line552">line 552</a>
     </li></ul></dd>
     
 
@@ -1968,7 +1968,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line559">line 559</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line560">line 560</a>
     </li></ul></dd>
     
 
@@ -2035,7 +2035,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line567">line 567</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line568">line 568</a>
     </li></ul></dd>
     
 
@@ -2102,7 +2102,7 @@ It is not called while the pointer is inside of the object, just on the first ti
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line532">line 532</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line533">line 533</a>
     </li></ul></dd>
     
 
@@ -2173,7 +2173,7 @@ This method is called for every object before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line541">line 541</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line542">line 542</a>
     </li></ul></dd>
     
 
@@ -3098,7 +3098,7 @@ Should be implemented by underlying classes.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line472">line 472</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line473">line 473</a>
     </li></ul></dd>
     
 
@@ -4705,7 +4705,7 @@ To detect when the object drag stops the onPointerDragEnd() method can be used.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line499">line 499</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line500">line 500</a>
     </li></ul></dd>
     
 
@@ -4874,7 +4874,7 @@ Dont forget to register object types using the Object2D.register() method.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line666">line 666</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line665">line 665</a>
     </li></ul></dd>
     
 
@@ -5162,7 +5162,7 @@ Data has to be parsed back into a usable object.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line611">line 611</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line612">line 612</a>
     </li></ul></dd>
     
 
@@ -5220,7 +5220,7 @@ Data has to be parsed back into a usable object.
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport, canvas, renderer)</span><span class="type-signature"></span></h4>
     
 
     
@@ -5332,6 +5332,29 @@ This is called before style() and draw(). It can also be used for some pre-rende
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>renderer</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Renderer.html">Renderer</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Renderer object being used to draw the object into the canvas.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -5374,7 +5397,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line456">line 456</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line457">line 457</a>
     </li></ul></dd>
     
 
@@ -5710,7 +5733,7 @@ This is called before style() and draw(). It can also be used for some pre-rende
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -227,7 +227,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Vector2.html

@@ -4578,7 +4578,7 @@ Values stored as [x, y].
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -1096,7 +1096,7 @@ Also updates the inverse matrix of the viewport.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -159,7 +159,7 @@ export {Viewport};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/ViewportControls.html

@@ -192,7 +192,7 @@
 
         
             
-<h4 class="name" id="allowRotation"><span class="type-signature"></span>allowRotation<span class="type-signature"></span></h4>
+<h4 class="name" id="allowRotation"><span class="type-signature"></span>allowRotation<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -205,6 +205,16 @@ Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -238,7 +248,7 @@ Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line44">line 44</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line54">line 54</a>
     </li></ul></dd>
     
 
@@ -256,7 +266,7 @@ Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating
 
         
             
-<h4 class="name" id="allowScale"><span class="type-signature"></span>allowScale<span class="type-signature"></span></h4>
+<h4 class="name" id="allowScale"><span class="type-signature"></span>allowScale<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -269,6 +279,16 @@ Scaling is performed using the pointer scroll.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -302,7 +322,7 @@ Scaling is performed using the pointer scroll.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line30">line 30</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line36">line 36</a>
     </li></ul></dd>
     
 
@@ -320,7 +340,7 @@ Scaling is performed using the pointer scroll.
 
         
             
-<h4 class="name" id="dragButton"><span class="type-signature"></span>dragButton<span class="type-signature"></span></h4>
+<h4 class="name" id="dragButton"><span class="type-signature"></span>dragButton<span class="type-signature"> :number</span></h4>
 
 
 
@@ -333,6 +353,16 @@ On touch enabled devices the touch event is represented as a LEFT button.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -366,7 +396,7 @@ On touch enabled devices the touch event is represented as a LEFT button.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line23">line 23</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line27">line 27</a>
     </li></ul></dd>
     
 
@@ -384,7 +414,7 @@ On touch enabled devices the touch event is represented as a LEFT button.
 
         
             
-<h4 class="name" id="moveOnScale"><span class="type-signature"></span>moveOnScale<span class="type-signature"></span></h4>
+<h4 class="name" id="moveOnScale"><span class="type-signature"></span>moveOnScale<span class="type-signature"> :boolean</span></h4>
 
 
 
@@ -397,6 +427,16 @@ For some application its easier to focus the target if the viewport moves to the
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">boolean</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -430,7 +470,7 @@ For some application its easier to focus the target if the viewport moves to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line37">line 37</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -448,7 +488,7 @@ For some application its easier to focus the target if the viewport moves to the
 
         
             
-<h4 class="name" id="rotationInitial"><span class="type-signature"></span>rotationInitial<span class="type-signature"></span></h4>
+<h4 class="name" id="rotationInitial"><span class="type-signature"></span>rotationInitial<span class="type-signature"> :number</span></h4>
 
 
 
@@ -459,6 +499,16 @@ For some application its easier to focus the target if the viewport moves to the
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type">number</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -492,7 +542,7 @@ For some application its easier to focus the target if the viewport moves to the
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line56">line 56</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line70">line 70</a>
     </li></ul></dd>
     
 
@@ -510,7 +560,7 @@ For some application its easier to focus the target if the viewport moves to the
 
         
             
-<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"></span></h4>
+<h4 class="name" id="rotationPoint"><span class="type-signature"></span>rotationPoint<span class="type-signature"> :<a href="Vector2.html">Vector2</a>|null</span></h4>
 
 
 
@@ -523,6 +573,19 @@ Is set to null when the viewport is not being rotated.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Vector2.html">Vector2</a></span>
+|
+
+<span class="param-type">null</span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -556,7 +619,7 @@ Is set to null when the viewport is not being rotated.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line51">line 51</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line63">line 63</a>
     </li></ul></dd>
     
 
@@ -574,7 +637,7 @@ Is set to null when the viewport is not being rotated.
 
         
             
-<h4 class="name" id="viewport"><span class="type-signature"></span>viewport<span class="type-signature"></span></h4>
+<h4 class="name" id="viewport"><span class="type-signature"></span>viewport<span class="type-signature"> :<a href="Viewport.html">Viewport</a></span></h4>
 
 
 
@@ -585,6 +648,16 @@ Is set to null when the viewport is not being rotated.
 
 
 
+    <h5>Type:</h5>
+    <ul>
+        <li>
+            
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+        </li>
+    </ul>
+
 
 
 
@@ -618,7 +691,7 @@ Is set to null when the viewport is not being rotated.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line16">line 16</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line18">line 18</a>
     </li></ul></dd>
     
 
@@ -708,7 +781,7 @@ Should be called every frame before rendering.
 
             
 
-            <td class="description last"></td>
+            <td class="description last">Pointer used to control the viewport.</td>
         </tr>
 
     
@@ -749,7 +822,7 @@ Should be called every frame before rendering.
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line66">line 66</a>
+        <a href="controls_ViewportControls.js.html">controls/ViewportControls.js</a>, <a href="controls_ViewportControls.js.html#line80">line 80</a>
     </li></ul></dd>
     
 
@@ -801,7 +874,7 @@ Should be called every frame before rendering.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:05 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/controls_ViewportControls.js.html

@@ -40,6 +40,8 @@ function ViewportControls(viewport)
 {
 	/**
 	 * Viewport being controlled by this object.
+	 *
+	 * @type {Viewport}
 	 */
 	this.viewport = viewport;
 
@@ -47,6 +49,8 @@ function ViewportControls(viewport)
 	 * Button used to drag and viewport around.
 	 *
 	 * On touch enabled devices the touch event is represented as a LEFT button.
+	 *
+	 * @type {number}
 	 */
 	this.dragButton = Pointer.RIGHT;
 
@@ -54,6 +58,8 @@ function ViewportControls(viewport)
 	 * Is set to true allow the viewport to be scalled.
 	 *
 	 * Scaling is performed using the pointer scroll.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowScale = true;
 
@@ -61,6 +67,8 @@ function ViewportControls(viewport)
 	 * Flag to indicate if the viewport should move when scalling.
 	 *
 	 * For some application its easier to focus the target if the viewport moves to the pointer location while scalling.
+	 *
+	 * @type {boolean}
 	 */
 	this.moveOnScale = false;
 
@@ -68,6 +76,8 @@ function ViewportControls(viewport)
 	 * If true allows the viewport to be rotated.
 	 *
 	 * Rotation is performed by holding the RIGHT and LEFT pointer buttons and rotating around the initial point.
+	 *
+	 * @type {boolean}
 	 */
 	this.allowRotation = true;
 
@@ -75,11 +85,15 @@ function ViewportControls(viewport)
 	 * Value of the initial point of rotation if the viewport is being rotated.
 	 *
 	 * Is set to null when the viewport is not being rotated.
+	 *
+	 * @type {Vector2 | null}
 	 */
 	this.rotationPoint = null;
 
 	/**
 	 * Initial rotation of the viewport.
+	 *
+	 * @type {number}
 	 */
 	this.rotationInitial = 0;
 }
@@ -89,7 +103,7 @@ function ViewportControls(viewport)
  *
  * Should be called every frame before rendering.
  *
- * @param {Pointer} pointer
+ * @param {Pointer} pointer Pointer used to control the viewport.
  */
 ViewportControls.prototype.update = function(pointer)
 {	
@@ -131,9 +145,9 @@ ViewportControls.prototype.update = function(pointer)
 		}
 		else
 		{
-			var pointer = pointer.position.clone();
-			pointer.sub(this.rotationPoint);
-			this.viewport.rotation = this.rotationInitial + pointer.angle();
+			var point = pointer.position.clone();
+			point.sub(this.rotationPoint);
+			this.viewport.rotation = this.rotationInitial + point.angle();
 			this.viewport.matrixNeedsUpdate = true;
 		}
 	}
@@ -168,7 +182,7 @@ export {ViewportControls};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/global.html

@@ -280,7 +280,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

@@ -56,7 +56,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -35,16 +35,22 @@ function Key()
 {
 	/**
 	 * Indicates if this key is currently pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.pressed = false;
 
 	/**
 	 * Indicates if this key was just pressed.
+	 *
+	 * @type {boolean}
 	 */
 	this.justPressed = false;
 	
 	/**
 	 * Indicates if this key was just released.
+	 *
+	 * @type {boolean}
 	 */
 	this.justReleased = false;
 }
@@ -57,6 +63,8 @@ Key.prototype.constructor = Key;
 
 /**
  * Update Key status based on new key state.
+ *
+ * @param {number} action Key action that was performed.
  */
 Key.prototype.update = function(action)
 {
@@ -123,7 +131,7 @@ export {Key};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -52,36 +52,54 @@ function Pointer(domElement, canvas)
 
 	/**
 	 * Array with pointer buttons status.
+	 *
+	 * @type {number[]}
 	 */
 	this.keys = new Array(5);
 
 	/**
 	 * Pointer position inside of the window (coordinates in window space).
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.position = new Vector2(0, 0);
 
 	/**
-	 * Pointer movement (coordinates in window space).
+	 * Pointer movement (coordinates in window space). Since the last update.
+	 *
+	 * This value is accumulated from multiple mouse triggered events between updated.
+	 *
+	 * @type {Vector2}
 	 */
 	this.delta = new Vector2(0, 0);
 
 	/**
-	 * Pointer scroll wheel movement.
+	 * Pointer scroll wheel movement, since the last update.
+	 *
+	 * @type {number}
 	 */
 	this.wheel = 0;
 	
 	/**
 	 * Indicates a button of the pointer was double clicked.
+	 *
+	 * @type {boolean}
 	 */
 	this.doubleClicked = new Array(5);
 
 	/**
 	 * DOM element where to attach the pointer events.
+	 *
+	 * @type {Element}
 	 */
 	this.domElement = (domElement !== undefined) ? domElement : window;
 
 	/**
 	 * Canvas attached to this pointer instance used to calculate position and delta in element space coordinates.
+	 *
+	 * @type {Element}
 	 */
 	this.canvas = null;
 	if(canvas !== undefined)
@@ -92,9 +110,11 @@ function Pointer(domElement, canvas)
 	/**
 	 * Event manager responsible for updating the raw data variables.
 	 *
-	 * Diferent events are used depending on the host platform.
+	 * Different events are used depending on the host platform.
 	 *
 	 * When the update method is called the raw data is reset.
+	 *
+	 * @type {EventManager}
 	 */
 	this.events = new EventManager();
 
@@ -214,33 +234,48 @@ Pointer.prototype.constructor = Pointer;
 
 /**
  * Left pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.LEFT = 0;
 
 /**
  * Middle pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.MIDDLE = 1;
 
 /**
  * Right pointer button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.RIGHT = 2;
 
 /**
  * Back pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.BACK = 3;
 
 /**
  * Forward pointer navigation button.
+ *
+ * @static
+ * @type {number}
  */
 Pointer.FORWARD = 4;
 
 /**
  * Element to be used for coordinates calculation relative to that canvas.
  * 
- * @param {DOM} canvas Canvas to be attached to the Pointer instance
+ * @param {DOM} element Canvas to be attached to the Pointer instance
  */
 Pointer.setCanvas = function(element)
 {
@@ -315,8 +350,6 @@ Pointer.buttonJustReleased = function(button)
 
 /**
  * Update pointer position.
- *
- * Automatically called by the runtime.
  * 
  * @param {Number} x
  * @param {Number} y
@@ -340,8 +373,6 @@ Pointer.updatePosition = function(x, y, xDiff, yDiff)
 
 /**
  * Update a pointer button.
- * 
- * Automatically called by the runtime.
  *
  * @param {Number} button
  * @param {Number} action
@@ -356,6 +387,8 @@ Pointer.updateKey = function(button, action)
 
 /**
  * Update pointer buttons state, position, wheel and delta synchronously.
+ *
+ * Should be called every frame on the update loop before reading any values from the pointer.
  */
 Pointer.update = function()
 {
@@ -413,7 +446,9 @@ Pointer.update = function()
 };
 
 /**
- * Create pointer events.
+ * Create pointer events to collect input data.
+ *
+ * Should be called before using the pointer object.
  */
 Pointer.create = function()
 {
@@ -421,7 +456,9 @@ Pointer.create = function()
 };
 
 /**
- * Dispose pointer events.
+ * Dispose pointer events, should be called after the objects is no longer required.
+ *
+ * If not called leaves the window events created leaving a memory/code leak.
  */
 Pointer.dispose = function()
 {
@@ -446,7 +483,7 @@ export {Pointer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -335,7 +335,7 @@ export {Box2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -322,7 +322,7 @@ export {Matrix};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -80,7 +80,7 @@ export {UUID};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -475,7 +475,7 @@ export {Vector2};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_BezierCurve.js.html

@@ -147,7 +147,7 @@ export {BezierCurve};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -145,7 +145,7 @@ export {Box};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -143,7 +143,7 @@ export {Circle};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -102,12 +102,12 @@ DOM.prototype.onRemove = function()
 	}
 };
 
-DOM.prototype.transform = function(context, viewport, canvas)
+DOM.prototype.transform = function(context, viewport, canvas, renderer)
 {
 	// Check if the DOM element parent is null
 	if(this.parentElement === null)
 	{
-		this.parentElement = canvas.parentElement;
+		this.parentElement = renderer.getDomContainer();
 		this.parentElement.appendChild(this.element);
 	}
 
@@ -169,7 +169,7 @@ export {DOM};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Image.js.html

@@ -128,7 +128,7 @@ export {Image};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -146,7 +146,7 @@ export {Line};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_MultiLineText.js.html

@@ -161,7 +161,7 @@ export {MultiLineText};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -155,7 +155,7 @@ export {Pattern};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_QuadraticCurve.js.html

@@ -130,7 +130,7 @@ export {QuadraticCurve};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_RoundedBox.js.html

@@ -131,7 +131,7 @@ export {RoundedBox};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -163,7 +163,7 @@ export {Text};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_chart_Graph.js.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: objects/chart/Graph.js</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: objects/chart/Graph.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>import {Object2D} from "../../Object2D.js";
+import {Vector2} from "../../math/Vector2.js";
+import {Box2} from "../../math/Box2.js";
+
+/**
+ * Graph object is used to draw simple graph data into the canvas.
+ *
+ * Graph data is composed of X, Y values.
+ *
+ * @class
+ * @extends {Object2D}
+ */
+function Graph()
+{
+	Object2D.call(this);
+
+	/**
+	 * Graph object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * Color of the box border line.
+	 */
+	this.strokeStyle = "rgb(0, 153, 255)";
+
+	/**
+	 * Line width.
+	 */
+	this.lineWidth = 1;
+
+	/**
+	 * Background color of the box.
+	 */
+	this.fillStyle = "rgba(0, 153, 255, 0.3)";
+
+	/**
+	 * Minimum value of the graph.
+	 */
+	this.min = 0;
+
+	/**
+	 * Maximum value of the graph.
+	 */
+	this.max = 10;
+
+	/**
+	 * Data to be presented in the graph.
+	 *
+	 * The array should store numeric values.
+	 */
+	this.data = [];
+}
+
+Graph.prototype = Object.create(Object2D.prototype);
+Graph.prototype.constructor = Graph;
+Graph.prototype.type = "Graph";
+Object2D.register(Graph, "Graph");
+
+Graph.prototype.isInside = function(point)
+{
+	return this.box.containsPoint(point);
+};
+
+Graph.prototype.draw = function(context, viewport, canvas)
+{
+	if(this.data.length === 0)
+	{
+		return;
+	}
+	
+	var width = this.box.max.x - this.box.min.x;
+	var height = this.box.max.y - this.box.min.y;
+
+	context.lineWidth = this.lineWidth;
+	context.strokeStyle = this.strokeStyle;
+	context.beginPath();
+		
+	var step = width / (this.data.length - 1);
+	var gamma = this.max - this.min;
+
+	context.moveTo(this.box.min.x, this.box.max.y - ((this.data[0] - this.min) / gamma) * height);
+	
+	for(var i = 1, s = step; i &lt; this.data.length; s += step, i++)
+	{
+		context.lineTo(this.box.min.x + s, this.box.max.y - ((this.data[i] - this.min) / gamma) * height);
+	}
+
+	context.stroke();
+
+	if(this.fillStyle !== null)
+	{
+		context.fillStyle = this.fillStyle;
+
+		context.lineTo(this.box.max.x, this.box.max.y);
+		context.lineTo(this.box.min.x, this.box.max.y);
+		context.fill();
+	}
+};
+
+Graph.prototype.serialize = function(recursive)
+{
+	var data = Object2D.prototype.serialize.call(this, recursive);
+
+	data.box = this.box.toArray();
+	data.strokeStyle = this.strokeStyle;
+	data.lineWidth = this.lineWidth;
+	data.fillStyle = this.fillStyle;
+	data.min = this.min;
+	data.max = this.max;
+	data.data = this.data;
+
+	return data;
+};
+
+Graph.prototype.parse = function(data, root)
+{
+	Object2D.prototype.parse.call(this, data, root);
+
+	this.box.fromArray(data.box);
+	this.strokeStyle = data.strokeStyle;
+	this.lineWidth = data.lineWidth;
+	this.fillStyle = data.fillStyle;
+	this.min = data.min;
+	this.max = data.max;
+	this.data = data.data;
+};
+
+
+export {Graph};
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="AnimationTimer.html">AnimationTimer</a></li><li><a href="BezierCurve.html">BezierCurve</a></li><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxMask.html">BoxMask</a></li><li><a href="Circle.html">Circle</a></li><li><a href="DOM.html">DOM</a></li><li><a href="EventManager.html">EventManager</a></li><li><a href="FileUtils.html">FileUtils</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Helpers.html">Helpers</a></li><li><a href="Image.html">Image</a></li><li><a href="Key.html">Key</a></li><li><a href="Line.html">Line</a></li><li><a href="Mask.html">Mask</a></li><li><a href="Matrix.html">Matrix</a></li><li><a href="MultiLineText.html">MultiLineText</a></li><li><a href="Node.html">Node</a></li><li><a href="NodeConnector.html">NodeConnector</a></li><li><a href="NodeGraph.html">NodeGraph</a></li><li><a href="NodeSocket.html">NodeSocket</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Pattern.html">Pattern</a></li><li><a href="Pointer.html">Pointer</a></li><li><a href="QuadraticCurve.html">QuadraticCurve</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="RoundedBox.html">RoundedBox</a></li><li><a href="Text.html">Text</a></li><li><a href="UUID.html">UUID</a></li><li><a href="Vector2.html">Vector2</a></li><li><a href="Viewport.html">Viewport</a></li><li><a href="ViewportControls.html">ViewportControls</a></li></ul><h3>Global</h3><ul><li><a href="global.html#writeFile">writeFile</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/objects_mask_BoxMask.js.html

@@ -107,7 +107,7 @@ export {BoxMask};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_mask_Mask.js.html

@@ -81,7 +81,7 @@ export {Mask};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_Node.js.html

@@ -230,7 +230,7 @@ export {Node};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeConnector.js.html

@@ -162,7 +162,7 @@ export {NodeConnector};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeGraph.js.html

@@ -102,7 +102,7 @@ export {NodeGraph};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_node_NodeSocket.js.html

@@ -404,7 +404,7 @@ export {NodeSocket};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_AnimationTimer.js.html

@@ -112,7 +112,7 @@ export {AnimationTimer};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_EventManager.js.html

@@ -109,7 +109,7 @@ export {EventManager};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_FileUtils.js.html

@@ -137,7 +137,7 @@ export {FileUtils};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_Helpers.js.html

@@ -154,7 +154,7 @@ export {Helpers};
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Wed May 20 2020 00:54:04 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a> on Sun May 24 2020 22:40:54 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "escher.js",
-	"version": "0.1.13",
+	"version": "0.1.14",
 	"description": "escher.js is a web library for building interactive diagrams and graphs.",
 	"main": "build/escher.min.js",
 	"repository": {