Masks attached to object

build/trenette.js

@@ -573,7 +573,7 @@
 	};
 
 	/**
-	 * Implements all UUID related methods.
+	 * Class to implement UUID generation methods.
 	 *
 	 * @class
 	 */
@@ -583,6 +583,8 @@
 	 * Generate new random UUID v4 as string.
 	 *
 	 * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+	 *
+	 * @static
 	 */
 	UUID.generate = (function ()
 	{
@@ -682,6 +684,13 @@
 		 */
 		this.inverseGlobalMatrix = new Matrix();
 
+		/**
+		 * Masks being applied to this object.
+		 *
+		 * Multiple masks can be used simultaneously.
+		 */
+		this.masks = [];
+
 		/**
 		 * If true the matrix is updated before rendering the object.
 		 */
@@ -694,6 +703,13 @@
 		 */
 		this.draggable = false;
 
+		/**
+		 * Indicates if this object uses pointer events.
+		 *
+		 * Can be set false to skip the pointer interaction events.
+		 */
+		this.pointerEvents = true;
+
 		/**
 		 * Flag to indicate wheter this objet ignores the viewport transformation.
 		 */
@@ -709,11 +725,6 @@
 		 */
 		this.restoreContextState = true;
 
-		/**
-		 * Flag to indicate if the context of canvas should be restored after render.
-		 */
-		this.restoreContextState = true;
-
 		/**
 		 * Flag indicating if the pointer is inside of the element.
 		 *
@@ -799,9 +810,14 @@
 	};
 
 	/**
-	 * Apply the transform to the rendering context, it is assumed that the viewport transform is pre-applied to the context.
+	 * Apply the transform to the rendering context.
+	 *
+	 * It is assumed that the viewport transform is pre-applied to the context.
 	 *
 	 * Can also be used for pre rendering logic.
+	 *
+	 * @param {CanvasContext} context Canvas 2d drawing context.
+	 * @param {Viewport} viewport Viewport applied to the canvas.
 	 */
 	Object2D.prototype.transform = function(context, viewport)
 	{
@@ -813,7 +829,9 @@
 	 *
 	 * Has to be implemented by underlying classes.
 	 *
-	 * @param context Canvas 2d drawing context.
+	 * @param {CanvasContext} context Canvas 2d drawing context.
+	 * @param {Viewport} viewport Viewport applied to the canvas.
+	 * @param {DOM} canvas DOM canvas element where the content is being drawn.
 	 */
 	Object2D.prototype.draw = function(context, viewport, canvas){};
 
@@ -1391,7 +1409,18 @@
 	 */
 	Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 	{
+		function loop()
+		{
+			if(onUpdate !== undefined)
+			{
+				onUpdate();
+			}
+
+			this.update(group, viewport);
+			requestAnimationFrame(loop);
+		}
 
+		loop();
 	};
 
 	/**
@@ -1436,84 +1465,89 @@
 		var point = pointer.position.clone();
 		var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
-		// Object transformation matrices
+		// Object pointer events
 		for(var i = 0; i < objects.length; i++)
 		{
 			var child = objects[i];
-			var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
-
-			// Check if the pointer pointer is inside
-			if(child.isInside(childPoint))
+			
+			//Process the
+			if(child.pointerEvents)
 			{
-				// Pointer enter
-				if(!child.pointerInside && child.onPointerEnter !== null)
-				{			
-					child.onPointerEnter(pointer, viewport);
-				}
+				var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
 
-				// Pointer over
-				if(child.onPointerOver !== null)
+				// Check if the pointer pointer is inside
+				if(child.isInside(childPoint))
 				{
-					child.onPointerOver(pointer, viewport);
-				}
+					// Pointer enter
+					if(!child.pointerInside && child.onPointerEnter !== null)
+					{			
+						child.onPointerEnter(pointer, viewport);
+					}
 
-				// Pointer pressed
-				if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
-				{	
-					child.onButtonPressed(pointer, viewport);
-				}
+					// Pointer over
+					if(child.onPointerOver !== null)
+					{
+						child.onPointerOver(pointer, viewport);
+					}
 
-				// Just released
-				if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
-				{	
-					child.onButtonUp(pointer, viewport);
-				}
+					// Pointer pressed
+					if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
+					{	
+						child.onButtonPressed(pointer, viewport);
+					}
 
-				// Pointer just pressed
-				if(pointer.buttonJustPressed(Pointer.LEFT))
-				{
-					if(child.onButtonDown !== null)
-					{
-						child.onButtonDown(pointer, viewport);
+					// Just released
+					if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
+					{	
+						child.onButtonUp(pointer, viewport);
 					}
 
-					if(child.draggable)
+					// Pointer just pressed
+					if(pointer.buttonJustPressed(Pointer.LEFT))
 					{
-						child.beingDragged = true;
-
-						// Only start a drag operation on the top element.
-						break;
+						if(child.onButtonDown !== null)
+						{
+							child.onButtonDown(pointer, viewport);
+						}
+
+						// Drag object and break to only start a drag operation on the top element.
+						if(child.draggable)
+						{
+							child.beingDragged = true;
+							break;
+						}
 					}
-				}
 
-				child.pointerInside = true;
-			}
-			else if(child.pointerInside)
-			{
-				// Pointer leave
-				if(child.onPointerLeave !== null)
-				{
-					child.onPointerLeave(pointer, viewport);
+					child.pointerInside = true;
 				}
+				else if(child.pointerInside)
+				{
+					// Pointer leave
+					if(child.onPointerLeave !== null)
+					{
+						child.onPointerLeave(pointer, viewport);
+					}
 
-				child.pointerInside = false;
-			}
+					child.pointerInside = false;
+				}
 
-			// Stop object drag
-			if(pointer.buttonJustReleased(Pointer.LEFT))
-			{	
-				if(child.draggable)
-				{
-					child.beingDragged = false;
+				// Stop object drag
+				if(pointer.buttonJustReleased(Pointer.LEFT))
+				{	
+					if(child.draggable)
+					{
+						child.beingDragged = false;
+					}
 				}
 			}
 		}
 
-		// Pointer drag event
+		// Object drag events and update logic
 		for(var i = 0; i < objects.length; i++)
 		{
 			var child = objects[i];
 
+			// Pointer drag event
 			if(child.beingDragged)
 			{	
 				var lastPosition = pointer.position.clone();
@@ -1536,39 +1570,60 @@
 			{
 				child.onUpdate();
 			}
-
-			child.updateMatrix();
 		}
 
+		// Update transformation matrices
+		object.traverse(function(child)
+		{
+			child.updateMatrix();
+		});
+		
 		// Sort objects by layer
 		objects.sort(function(a, b)
 		{
 			return a.layer - b.layer;
 		});
-
-		// Clear canvas
+		
+		this.context.setTransform(1, 0, 0, 1, 0, 0);
+		
+		// Clear canvas content
 		if(this.autoClear)
 		{
-			this.context.setTransform(1, 0, 0, 1, 0, 0);
 			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		}
 
-		// Set viewport matrix transform
-		viewport.matrix.setContextTransform(this.context);
-
 		// Render into the canvas
 		for(var i = 0; i < objects.length; i++)
 		{	
+			if(objects[i].isMask)
+			{
+				continue;
+			}
+
 			if(objects[i].saveContextState)
 			{
 				this.context.save();
 			}
 
-			if(objects[i].ignoreViewport)
+			// Apply all masks
+			var masks = objects[i].masks;
+			for(var j = 0; j < masks.length; j++)
 			{
-				this.context.setTransform(1, 0, 0, 1, 0, 0);
+				if(!masks[j].ignoreViewport)
+				{
+					viewport.matrix.setContextTransform(this.context);
+				}
+
+				masks[j].clip(this.context, viewport, this.canvas);
 			}
 
+			// Set the viewport transform
+			if(!objects[i].ignoreViewport)
+			{
+				viewport.matrix.setContextTransform(this.context);
+			}
+
+			// Apply the object transform to the canvas context
 			objects[i].transform(this.context, viewport, this.canvas);
 			objects[i].draw(this.context, viewport, this.canvas);
 
@@ -1741,22 +1796,36 @@
 		this.max.copy(box.max);
 	};
 
+	/**
+	 * Check if the box is empty (size equals zero or is negative).
+	 *
+	 * The box size is condireded valid on two negative axis.
+	 */
 	Box2.prototype.isEmpty = function()
 	{
-		// this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes
+
 		return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 	};
 
+	/**
+	 * Calculate the center point of the box.
+	 */
 	Box2.prototype.getCenter = function(target)
 	{
 		return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
 	};
 
+	/**
+	 * Get the size of the box.
+	 */
 	Box2.prototype.getSize = function(target)
 	{
 		return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
 	};
 
+	/**
+	 * Expand the box to contain a new point.
+	 */
 	Box2.prototype.expandByPoint = function(point)
 	{
 		this.min.min(point);
@@ -1765,23 +1834,45 @@
 		return this;
 	};
 
+	/**
+	 * Expand the box by adding a border with the vector size.
+	 *
+	 * Vector is subtracted from min and added to the max points.
+	 */
 	Box2.prototype.expandByVector = function(vector)
 	{
 		this.min.sub(vector);
 		this.max.add(vector);
 	};
 
+	/**
+	 * Expand the box by adding a border with the scalar value.
+	 */
 	Box2.prototype.expandByScalar = function(scalar)
 	{
 		this.min.addScalar(-scalar);
 		this.max.addScalar(scalar);
 	};
 
+	/**
+	 * Check if the box contains a point inside.
+	 *
+	 * @param {Vector2} point
+	 * @return {boolean} True if the box contains point.
+	 */
 	Box2.prototype.containsPoint = function(point)
 	{
 		return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true;
 	};
 
+	/**
+	 * Check if the box fully contains another box inside (different from intersects box).
+	 *
+	 * Only returns true if the box is fully contained.
+	 *
+	 * @param {Box2} box
+	 * @return {boolean} True if the box contains box.
+	 */
 	Box2.prototype.containsBox = function(box)
 	{
 		return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y;
@@ -1791,6 +1882,7 @@
 	 * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
 	 * 
 	 * @param {Box2} box
+	 * @return {boolean} True if the boxes intersect each other.
 	 */
 	Box2.prototype.intersectsBox = function(box)
 	{
@@ -1863,20 +1955,78 @@
 	};
 
 	/**
-	 * A stencil can be used to set the drawing region.
+	 * A mask can be used to set the drawing region.
 	 *
-	 * Stencils are treated as objects their shaphe is used to filter other objects shape.
+	 * Masks are treated as objects their shape is used to filter other objects shape.
 	 *
-	 * Multiple stencil objects can be active simulatenously.
+	 * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
 	 *
 	 * @class
 	 */
-	function Stencil()
+	function Mask()
 	{
 		Object2D.call(this);
 	}
 
-	Stencil.prototype = Object.create(Object2D.prototype);
+	Mask.prototype = Object.create(Object2D.prototype);
+
+	Mask.prototype.isMask = true;
+
+	/**
+	 * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+	 *
+	 * @param {CanvasContext} context Canvas 2d drawing context.
+	 * @param {Viewport} viewport Viewport applied to the canvas.
+	 * @param {DOM} canvas DOM canvas element where the content is being drawn.
+	 */
+	Mask.prototype.clip = function(context, viewport, canvas){};
+
+	/**
+	 * Box mask can be used to clear a box mask region.
+	 *
+	 * It will limit the drwaing region to this box.
+	 *
+	 * @class
+	 * @extends {Mask}
+	 */
+	function BoxMask()
+	{
+		Mask.call(this);
+
+		/**
+		 * Box object containing the size of the object.
+		 */
+		this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+		/**
+		 * If inverted the mask considers the outside of the box instead of the inside.
+		 */
+		this.invert = false;
+	}
+
+	BoxMask.prototype = Object.create(Mask.prototype);
+
+	BoxMask.prototype.clip = function(context, viewport, canvas)
+	{
+		context.beginPath();
+		
+		var width = this.box.max.x - this.box.min.x;
+		
+		if(this.invert)
+		{	
+			context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
+			context.rect(this.box.max.x, -5e3, 1e4, 1e4);
+			context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
+			context.rect(this.box.min.x, this.box.max.y, width, 1e4);
+		}
+		else
+		{
+			var height = this.box.max.y - this.box.min.y;
+			context.fillRect(this.box.min.x, this.box.min.y, width, height);
+		}
+
+		context.clip();
+	};
 
 	/**
 	 * Circle object draw a circular object, into the canvas.
@@ -2367,6 +2517,7 @@
 
 	exports.Box = Box;
 	exports.Box2 = Box2;
+	exports.BoxMask = BoxMask;
 	exports.Circle = Circle;
 	exports.DOM = DOM;
 	exports.EventManager = EventManager;
@@ -2374,12 +2525,12 @@
 	exports.Image = Image;
 	exports.Key = Key;
 	exports.Line = Line;
+	exports.Mask = Mask;
 	exports.Matrix = Matrix;
 	exports.Object2D = Object2D;
 	exports.Pattern = Pattern;
 	exports.Pointer = Pointer;
 	exports.Renderer = Renderer;
-	exports.Stencil = Stencil;
 	exports.Text = Text;
 	exports.UUID = UUID;
 	exports.Vector2 = Vector2;

build/trenette.module.js

@@ -567,7 +567,7 @@ Matrix.prototype.cssTransform = function()
 };
 
 /**
- * Implements all UUID related methods.
+ * Class to implement UUID generation methods.
  *
  * @class
  */
@@ -577,6 +577,8 @@ function UUID(){}
  * Generate new random UUID v4 as string.
  *
  * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+ *
+ * @static
  */
 UUID.generate = (function ()
 {
@@ -676,6 +678,13 @@ function Object2D()
 	 */
 	this.inverseGlobalMatrix = new Matrix();
 
+	/**
+	 * Masks being applied to this object.
+	 *
+	 * Multiple masks can be used simultaneously.
+	 */
+	this.masks = [];
+
 	/**
 	 * If true the matrix is updated before rendering the object.
 	 */
@@ -688,6 +697,13 @@ function Object2D()
 	 */
 	this.draggable = false;
 
+	/**
+	 * Indicates if this object uses pointer events.
+	 *
+	 * Can be set false to skip the pointer interaction events.
+	 */
+	this.pointerEvents = true;
+
 	/**
 	 * Flag to indicate wheter this objet ignores the viewport transformation.
 	 */
@@ -703,11 +719,6 @@ function Object2D()
 	 */
 	this.restoreContextState = true;
 
-	/**
-	 * Flag to indicate if the context of canvas should be restored after render.
-	 */
-	this.restoreContextState = true;
-
 	/**
 	 * Flag indicating if the pointer is inside of the element.
 	 *
@@ -793,9 +804,14 @@ Object2D.prototype.updateMatrix = function(context)
 };
 
 /**
- * Apply the transform to the rendering context, it is assumed that the viewport transform is pre-applied to the context.
+ * Apply the transform to the rendering context.
+ *
+ * It is assumed that the viewport transform is pre-applied to the context.
  *
  * Can also be used for pre rendering logic.
+ *
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
  */
 Object2D.prototype.transform = function(context, viewport)
 {
@@ -807,7 +823,9 @@ Object2D.prototype.transform = function(context, viewport)
  *
  * Has to be implemented by underlying classes.
  *
- * @param context Canvas 2d drawing context.
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */
 Object2D.prototype.draw = function(context, viewport, canvas){};
 
@@ -1385,7 +1403,18 @@ function Renderer(canvas)
  */
 Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
+	function loop()
+	{
+		if(onUpdate !== undefined)
+		{
+			onUpdate();
+		}
+
+		this.update(group, viewport);
+		requestAnimationFrame(loop);
+	}
 
+	loop();
 };
 
 /**
@@ -1430,84 +1459,89 @@ Renderer.prototype.update = function(object, viewport)
 	var point = pointer.position.clone();
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
-	// Object transformation matrices
+	// Object pointer events
 	for(var i = 0; i < objects.length; i++)
 	{
 		var child = objects[i];
-		var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
-
-		// Check if the pointer pointer is inside
-		if(child.isInside(childPoint))
+		
+		//Process the
+		if(child.pointerEvents)
 		{
-			// Pointer enter
-			if(!child.pointerInside && child.onPointerEnter !== null)
-			{			
-				child.onPointerEnter(pointer, viewport);
-			}
+			var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
 
-			// Pointer over
-			if(child.onPointerOver !== null)
+			// Check if the pointer pointer is inside
+			if(child.isInside(childPoint))
 			{
-				child.onPointerOver(pointer, viewport);
-			}
+				// Pointer enter
+				if(!child.pointerInside && child.onPointerEnter !== null)
+				{			
+					child.onPointerEnter(pointer, viewport);
+				}
 
-			// Pointer pressed
-			if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
-			{	
-				child.onButtonPressed(pointer, viewport);
-			}
+				// Pointer over
+				if(child.onPointerOver !== null)
+				{
+					child.onPointerOver(pointer, viewport);
+				}
 
-			// Just released
-			if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
-			{	
-				child.onButtonUp(pointer, viewport);
-			}
+				// Pointer pressed
+				if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
+				{	
+					child.onButtonPressed(pointer, viewport);
+				}
 
-			// Pointer just pressed
-			if(pointer.buttonJustPressed(Pointer.LEFT))
-			{
-				if(child.onButtonDown !== null)
-				{
-					child.onButtonDown(pointer, viewport);
+				// Just released
+				if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
+				{	
+					child.onButtonUp(pointer, viewport);
 				}
 
-				if(child.draggable)
+				// Pointer just pressed
+				if(pointer.buttonJustPressed(Pointer.LEFT))
 				{
-					child.beingDragged = true;
-
-					// Only start a drag operation on the top element.
-					break;
+					if(child.onButtonDown !== null)
+					{
+						child.onButtonDown(pointer, viewport);
+					}
+
+					// Drag object and break to only start a drag operation on the top element.
+					if(child.draggable)
+					{
+						child.beingDragged = true;
+						break;
+					}
 				}
-			}
 
-			child.pointerInside = true;
-		}
-		else if(child.pointerInside)
-		{
-			// Pointer leave
-			if(child.onPointerLeave !== null)
-			{
-				child.onPointerLeave(pointer, viewport);
+				child.pointerInside = true;
 			}
+			else if(child.pointerInside)
+			{
+				// Pointer leave
+				if(child.onPointerLeave !== null)
+				{
+					child.onPointerLeave(pointer, viewport);
+				}
 
-			child.pointerInside = false;
-		}
+				child.pointerInside = false;
+			}
 
-		// Stop object drag
-		if(pointer.buttonJustReleased(Pointer.LEFT))
-		{	
-			if(child.draggable)
-			{
-				child.beingDragged = false;
+			// Stop object drag
+			if(pointer.buttonJustReleased(Pointer.LEFT))
+			{	
+				if(child.draggable)
+				{
+					child.beingDragged = false;
+				}
 			}
 		}
 	}
 
-	// Pointer drag event
+	// Object drag events and update logic
 	for(var i = 0; i < objects.length; i++)
 	{
 		var child = objects[i];
 
+		// Pointer drag event
 		if(child.beingDragged)
 		{	
 			var lastPosition = pointer.position.clone();
@@ -1530,39 +1564,60 @@ Renderer.prototype.update = function(object, viewport)
 		{
 			child.onUpdate();
 		}
-
-		child.updateMatrix();
 	}
 
+	// Update transformation matrices
+	object.traverse(function(child)
+	{
+		child.updateMatrix();
+	});
+	
 	// Sort objects by layer
 	objects.sort(function(a, b)
 	{
 		return a.layer - b.layer;
 	});
-
-	// Clear canvas
+	
+	this.context.setTransform(1, 0, 0, 1, 0, 0);
+	
+	// Clear canvas content
 	if(this.autoClear)
 	{
-		this.context.setTransform(1, 0, 0, 1, 0, 0);
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 
-	// Set viewport matrix transform
-	viewport.matrix.setContextTransform(this.context);
-
 	// Render into the canvas
 	for(var i = 0; i < objects.length; i++)
 	{	
+		if(objects[i].isMask)
+		{
+			continue;
+		}
+
 		if(objects[i].saveContextState)
 		{
 			this.context.save();
 		}
 
-		if(objects[i].ignoreViewport)
+		// Apply all masks
+		var masks = objects[i].masks;
+		for(var j = 0; j < masks.length; j++)
 		{
-			this.context.setTransform(1, 0, 0, 1, 0, 0);
+			if(!masks[j].ignoreViewport)
+			{
+				viewport.matrix.setContextTransform(this.context);
+			}
+
+			masks[j].clip(this.context, viewport, this.canvas);
 		}
 
+		// Set the viewport transform
+		if(!objects[i].ignoreViewport)
+		{
+			viewport.matrix.setContextTransform(this.context);
+		}
+
+		// Apply the object transform to the canvas context
 		objects[i].transform(this.context, viewport, this.canvas);
 		objects[i].draw(this.context, viewport, this.canvas);
 
@@ -1735,22 +1790,36 @@ Box2.prototype.copy = function(box)
 	this.max.copy(box.max);
 };
 
+/**
+ * Check if the box is empty (size equals zero or is negative).
+ *
+ * The box size is condireded valid on two negative axis.
+ */
 Box2.prototype.isEmpty = function()
 {
-	// this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes
+
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 };
 
+/**
+ * Calculate the center point of the box.
+ */
 Box2.prototype.getCenter = function(target)
 {
 	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
 };
 
+/**
+ * Get the size of the box.
+ */
 Box2.prototype.getSize = function(target)
 {
 	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
 };
 
+/**
+ * Expand the box to contain a new point.
+ */
 Box2.prototype.expandByPoint = function(point)
 {
 	this.min.min(point);
@@ -1759,23 +1828,45 @@ Box2.prototype.expandByPoint = function(point)
 	return this;
 };
 
+/**
+ * Expand the box by adding a border with the vector size.
+ *
+ * Vector is subtracted from min and added to the max points.
+ */
 Box2.prototype.expandByVector = function(vector)
 {
 	this.min.sub(vector);
 	this.max.add(vector);
 };
 
+/**
+ * Expand the box by adding a border with the scalar value.
+ */
 Box2.prototype.expandByScalar = function(scalar)
 {
 	this.min.addScalar(-scalar);
 	this.max.addScalar(scalar);
 };
 
+/**
+ * Check if the box contains a point inside.
+ *
+ * @param {Vector2} point
+ * @return {boolean} True if the box contains point.
+ */
 Box2.prototype.containsPoint = function(point)
 {
 	return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true;
 };
 
+/**
+ * Check if the box fully contains another box inside (different from intersects box).
+ *
+ * Only returns true if the box is fully contained.
+ *
+ * @param {Box2} box
+ * @return {boolean} True if the box contains box.
+ */
 Box2.prototype.containsBox = function(box)
 {
 	return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y;
@@ -1785,6 +1876,7 @@ Box2.prototype.containsBox = function(box)
  * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
  * 
  * @param {Box2} box
+ * @return {boolean} True if the boxes intersect each other.
  */
 Box2.prototype.intersectsBox = function(box)
 {
@@ -1857,20 +1949,78 @@ Box2.prototype.equals = function(box)
 };
 
 /**
- * A stencil can be used to set the drawing region.
+ * A mask can be used to set the drawing region.
  *
- * Stencils are treated as objects their shaphe is used to filter other objects shape.
+ * Masks are treated as objects their shape is used to filter other objects shape.
  *
- * Multiple stencil objects can be active simulatenously.
+ * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
  *
  * @class
  */
-function Stencil()
+function Mask()
 {
 	Object2D.call(this);
 }
 
-Stencil.prototype = Object.create(Object2D.prototype);
+Mask.prototype = Object.create(Object2D.prototype);
+
+Mask.prototype.isMask = true;
+
+/**
+ * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+ *
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {DOM} canvas DOM canvas element where the content is being drawn.
+ */
+Mask.prototype.clip = function(context, viewport, canvas){};
+
+/**
+ * Box mask can be used to clear a box mask region.
+ *
+ * It will limit the drwaing region to this box.
+ *
+ * @class
+ * @extends {Mask}
+ */
+function BoxMask()
+{
+	Mask.call(this);
+
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * If inverted the mask considers the outside of the box instead of the inside.
+	 */
+	this.invert = false;
+}
+
+BoxMask.prototype = Object.create(Mask.prototype);
+
+BoxMask.prototype.clip = function(context, viewport, canvas)
+{
+	context.beginPath();
+	
+	var width = this.box.max.x - this.box.min.x;
+	
+	if(this.invert)
+	{	
+		context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
+		context.rect(this.box.max.x, -5e3, 1e4, 1e4);
+		context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
+		context.rect(this.box.min.x, this.box.max.y, width, 1e4);
+	}
+	else
+	{
+		var height = this.box.max.y - this.box.min.y;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
+
+	context.clip();
+};
 
 /**
  * Circle object draw a circular object, into the canvas.
@@ -2359,4 +2509,4 @@ Pattern.prototype.draw = function(context, viewport, canvas)
 	context.fillRect(this.box.min.x, this.box.min.y, width, height);
 };
 
-export { Box, Box2, Circle, DOM, EventManager, Helpers, Image, Key, Line, Matrix, Object2D, Pattern, Pointer, Renderer, Stencil, Text, UUID, Vector2, Viewport };
+export { Box, Box2, BoxMask, Circle, DOM, EventManager, Helpers, Image, Key, Line, Mask, Matrix, Object2D, Pattern, Pointer, Renderer, Text, UUID, Vector2, Viewport };

docs/Box.html

@@ -345,13 +345,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/BoxStencil.html

@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Class: BoxStencil</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">Class: BoxStencil</h1>
+
+    
+
+
+
+
+<section>
+
+<header>
+    
+        <h2><span class="attribs"><span class="type-signature"></span></span>BoxStencil<span class="signature">()</span><span class="type-signature"></span></h2>
+        
+    
+</header>
+
+<article>
+    <div class="container-overview">
+    
+        
+
+    
+
+    
+    <h4 class="name" id="BoxStencil"><span class="type-signature"></span>new BoxStencil<span class="signature">()</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Box stencil can be used to clear a box mask region.

It will limit the drwaing region to this box.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="stencil_BoxStencil.js.html">stencil/BoxStencil.js</a>, <a href="stencil_BoxStencil.js.html#line15">line 15</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    
+    </div>
+
+    
+        <h3 class="subsection-title">Extends</h3>
+
+        
+
+
+    <ul>
+        <li><a href="Stencil.html">Stencil</a></li>
+    </ul>
+
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <h3 class="subsection-title">Members</h3>
+
+        
+            
+<h4 class="name" id="box"><span class="type-signature"></span>box<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    Box object containing the size of the object.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="stencil_BoxStencil.js.html">stencil/BoxStencil.js</a>, <a href="stencil_BoxStencil.js.html#line22">line 22</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="invert"><span class="type-signature"></span>invert<span class="type-signature"></span></h4>
+
+
+
+
+<div class="description">
+    If inverted the stencil considers the outside of the box instead of the inside.
+</div>
+
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="stencil_BoxStencil.js.html">stencil/BoxStencil.js</a>, <a href="stencil_BoxStencil.js.html#line27">line 27</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+    
+
+    
+        <h3 class="subsection-title">Methods</h3>
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="clip"><span class="type-signature"></span>clip<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+</div>
+
+
+
+
+
+
+
+
+
+    <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>context</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">CanvasContext</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Canvas 2d drawing context.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>viewport</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Viewport applied to the canvas.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-overrides">Overrides:</dt>
+    <dd class="tag-overrides"><ul class="dummy"><li>
+        <a href="Stencil.html#clip">Stencil#clip</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line32">line 32</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+    
+
+    
+
+    
+</article>
+
+</section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/Circle.html

@@ -345,13 +345,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/DOM.html

@@ -345,13 +345,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.html

@@ -682,13 +682,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/EventManager.js.html

@@ -105,13 +105,13 @@ export {EventManager};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Helpers.html

@@ -335,13 +335,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Image.html

@@ -485,13 +485,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Key.html

@@ -613,13 +613,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Line.html

@@ -469,13 +469,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Matrix.html

@@ -1875,13 +1875,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.html

@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line122">line 122</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line124">line 124</a>
     </li></ul></dd>
     
 
@@ -435,7 +435,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line95">line 95</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line102">line 102</a>
     </li></ul></dd>
     
 
@@ -745,7 +745,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line263">line 263</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line272">line 272</a>
     </li></ul></dd>
     
 
@@ -807,7 +807,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line258">line 258</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line267">line 267</a>
     </li></ul></dd>
     
 
@@ -869,7 +869,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line268">line 268</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line277">line 277</a>
     </li></ul></dd>
     
 
@@ -931,7 +931,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line227">line 227</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line236">line 236</a>
     </li></ul></dd>
     
 
@@ -993,7 +993,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line234">line 234</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line243">line 243</a>
     </li></ul></dd>
     
 
@@ -1055,7 +1055,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line241">line 241</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line250">line 250</a>
     </li></ul></dd>
     
 
@@ -1117,7 +1117,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line220">line 220</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line229">line 229</a>
     </li></ul></dd>
     
 
@@ -1259,13 +1259,13 @@
 
         
             
-<h4 class="name" id="pointerInside"><span class="type-signature"></span>pointerInside<span class="type-signature"></span></h4>
+<h4 class="name" id="pointerEvents"><span class="type-signature"></span>pointerEvents<span class="type-signature"></span></h4>
 
 
 
 
 <div class="description">
-    Flag indicating if the pointer is inside of the element.

Used to control object event.
+    Indicates if this object uses pointer events.

Can be set false to skip the pointer interaction events.
 </div>
 
 
@@ -1303,7 +1303,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line117">line 117</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line97">line 97</a>
     </li></ul></dd>
     
 
@@ -1321,13 +1321,13 @@
 
         
             
-<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"></span></h4>
+<h4 class="name" id="pointerInside"><span class="type-signature"></span>pointerInside<span class="type-signature"></span></h4>
 
 
 
 
 <div class="description">
-    Position of the object.
+    Flag indicating if the pointer is inside of the element.

Used to control object event.
 </div>
 
 
@@ -1365,7 +1365,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line32">line 32</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line119">line 119</a>
     </li></ul></dd>
     
 
@@ -1383,13 +1383,13 @@
 
         
             
-<h4 class="name" id="restoreContextState"><span class="type-signature"></span>restoreContextState<span class="type-signature"></span></h4>
+<h4 class="name" id="position"><span class="type-signature"></span>position<span class="type-signature"></span></h4>
 
 
 
 
 <div class="description">
-    Flag to indicate if the context of canvas should be restored after render.
+    Position of the object.
 </div>
 
 
@@ -1427,7 +1427,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line105">line 105</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line32">line 32</a>
     </li></ul></dd>
     
 
@@ -1489,7 +1489,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line110">line 110</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line112">line 112</a>
     </li></ul></dd>
     
 
@@ -1613,7 +1613,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line100">line 100</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line107">line 107</a>
     </li></ul></dd>
     
 
@@ -1923,7 +1923,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line147">line 147</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line149">line 149</a>
     </li></ul></dd>
     
 
@@ -1959,7 +1959,7 @@
     
 
     
-    <h4 class="name" id="draw"><span class="type-signature"></span>draw<span class="signature">(context)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="draw"><span class="type-signature"></span>draw<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2008,6 +2008,11 @@
 
             <td class="type">
             
+                
+<span class="param-type">CanvasContext</span>
+
+
+            
             </td>
 
             
@@ -2018,6 +2023,52 @@
         </tr>
 
     
+
+        <tr>
+            
+                <td class="name"><code>viewport</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Viewport applied to the canvas.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
     </tbody>
 </table>
 
@@ -2055,7 +2106,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line213">line 213</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line222">line 222</a>
     </li></ul></dd>
     
 
@@ -2143,7 +2194,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line171">line 171</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line173">line 173</a>
     </li></ul></dd>
     
 
@@ -2231,7 +2282,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line248">line 248</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line257">line 257</a>
     </li></ul></dd>
     
 
@@ -2363,7 +2414,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line158">line 158</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line160">line 160</a>
     </li></ul></dd>
     
 
@@ -2399,7 +2450,7 @@
     
 
     
-    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">()</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="transform"><span class="type-signature"></span>transform<span class="signature">(context, viewport)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2407,7 +2458,7 @@
 
 
 <div class="description">
-    Apply the transform to the rendering context.

Can also be used for pre rendering logic.
+    Apply the transform to the rendering context.

It is assumed that the viewport transform is pre-applied to the context.

Can also be used for pre rendering logic.
 </div>
 
 
@@ -2418,6 +2469,78 @@
 
 
 
+    <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>context</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">CanvasContext</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Canvas 2d drawing context.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>viewport</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Viewport applied to the canvas.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
 
 
 
@@ -2451,7 +2574,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line201">line 201</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line208">line 208</a>
     </li></ul></dd>
     
 
@@ -2583,7 +2706,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line130">line 130</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line132">line 132</a>
     </li></ul></dd>
     
 
@@ -2671,7 +2794,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line179">line 179</a>
+        <a href="Object2D.js.html">Object2D.js</a>, <a href="Object2D.js.html#line181">line 181</a>
     </li></ul></dd>
     
 
@@ -2717,13 +2840,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Object2D.js.html

@@ -117,6 +117,13 @@ function Object2D()
 	 */
 	this.draggable = false;
 
+	/**
+	 * Indicates if this object uses pointer events.
+	 *
+	 * Can be set false to skip the pointer interaction events.
+	 */
+	this.pointerEvents = true;
+
 	/**
 	 * Flag to indicate wheter this objet ignores the viewport transformation.
 	 */
@@ -132,11 +139,6 @@ function Object2D()
 	 */
 	this.restoreContextState = true;
 
-	/**
-	 * Flag to indicate if the context of canvas should be restored after render.
-	 */
-	this.restoreContextState = true;
-
 	/**
 	 * Flag indicating if the pointer is inside of the element.
 	 *
@@ -224,7 +226,12 @@ Object2D.prototype.updateMatrix = function(context)
 /**
  * Apply the transform to the rendering context.
  *
+ * It is assumed that the viewport transform is pre-applied to the context.
+ *
  * Can also be used for pre rendering logic.
+ *
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
  */
 Object2D.prototype.transform = function(context, viewport)
 {
@@ -236,9 +243,11 @@ Object2D.prototype.transform = function(context, viewport)
  *
  * Has to be implemented by underlying classes.
  *
- * @param context Canvas 2d drawing context.
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */
-Object2D.prototype.draw = function(context, viewport){};
+Object2D.prototype.draw = function(context, viewport, canvas){};
 
 /**
  * Callback method called every time before the object is draw into the canvas.
@@ -306,13 +315,13 @@ export {Object2D};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pattern.html

@@ -437,13 +437,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Pointer.html

@@ -2554,13 +2554,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.html

@@ -698,7 +698,7 @@
     
     <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#line64">line 64</a>
+        <a href="Renderer.js.html">Renderer.js</a>, <a href="Renderer.js.html#line75">line 75</a>
     </li></ul></dd>
     
 
@@ -744,13 +744,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Renderer.js.html

@@ -74,7 +74,18 @@ function Renderer(canvas)
  */
 Renderer.prototype.createRenderLoop = function(group, viewport, onUpdate)
 {
+	function loop()
+	{
+		if(onUpdate !== undefined)
+		{
+			onUpdate();
+		}
 
+		this.update(group, viewport);
+		requestAnimationFrame(loop);
+	}
+
+	loop();
 };
 
 /**
@@ -119,84 +130,89 @@ Renderer.prototype.update = function(object, viewport)
 	var point = pointer.position.clone();
 	var viewportPoint = viewport.inverseMatrix.transformPoint(point);
 
-	// Object transformation matrices
+	// Object pointer events
 	for(var i = 0; i < objects.length; i++)
 	{
 		var child = objects[i];
-		var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
-
-		// Check if the pointer pointer is inside
-		if(child.isInside(childPoint))
+		
+		//Process the
+		if(child.pointerEvents)
 		{
-			// Pointer enter
-			if(!child.pointerInside && child.onPointerEnter !== null)
-			{			
-				child.onPointerEnter(pointer, viewport);
-			}
+			var childPoint = child.inverseGlobalMatrix.transformPoint(child.ignoreViewport ? point : viewportPoint);
 
-			// Pointer over
-			if(child.onPointerOver !== null)
+			// Check if the pointer pointer is inside
+			if(child.isInside(childPoint))
 			{
-				child.onPointerOver(pointer, viewport);
-			}
+				// Pointer enter
+				if(!child.pointerInside && child.onPointerEnter !== null)
+				{			
+					child.onPointerEnter(pointer, viewport);
+				}
 
-			// Pointer pressed
-			if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
-			{	
-				child.onButtonPressed(pointer, viewport);
-			}
+				// Pointer over
+				if(child.onPointerOver !== null)
+				{
+					child.onPointerOver(pointer, viewport);
+				}
 
-			// Just released
-			if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
-			{	
-				child.onButtonUp(pointer, viewport);
-			}
+				// Pointer pressed
+				if(pointer.buttonPressed(Pointer.LEFT) && child.onButtonPressed !== null)
+				{	
+					child.onButtonPressed(pointer, viewport);
+				}
 
-			// Pointer just pressed
-			if(pointer.buttonJustPressed(Pointer.LEFT))
-			{
-				if(child.onButtonDown !== null)
-				{
-					child.onButtonDown(pointer, viewport);
+				// Just released
+				if(pointer.buttonJustReleased(Pointer.LEFT) && child.onButtonUp !== null)
+				{	
+					child.onButtonUp(pointer, viewport);
 				}
 
-				if(child.draggable)
+				// Pointer just pressed
+				if(pointer.buttonJustPressed(Pointer.LEFT))
 				{
-					child.beingDragged = true;
-
-					// Only start a drag operation on the top element.
-					break;
+					if(child.onButtonDown !== null)
+					{
+						child.onButtonDown(pointer, viewport);
+					}
+
+					// Drag object and break to only start a drag operation on the top element.
+					if(child.draggable)
+					{
+						child.beingDragged = true;
+						break;
+					}
 				}
-			}
 
-			child.pointerInside = true;
-		}
-		else if(child.pointerInside)
-		{
-			// Pointer leave
-			if(child.onPointerLeave !== null)
-			{
-				child.onPointerLeave(pointer, viewport);
+				child.pointerInside = true;
 			}
+			else if(child.pointerInside)
+			{
+				// Pointer leave
+				if(child.onPointerLeave !== null)
+				{
+					child.onPointerLeave(pointer, viewport);
+				}
 
-			child.pointerInside = false;
-		}
+				child.pointerInside = false;
+			}
 
-		// Stop object drag
-		if(pointer.buttonJustReleased(Pointer.LEFT))
-		{	
-			if(child.draggable)
-			{
-				child.beingDragged = false;
+			// Stop object drag
+			if(pointer.buttonJustReleased(Pointer.LEFT))
+			{	
+				if(child.draggable)
+				{
+					child.beingDragged = false;
+				}
 			}
 		}
 	}
 
-	// Pointer drag event
+	// Object drag events and update logic
 	for(var i = 0; i < objects.length; i++)
 	{
 		var child = objects[i];
 
+		// Pointer drag event
 		if(child.beingDragged)
 		{	
 			var lastPosition = pointer.position.clone();
@@ -219,17 +235,21 @@ Renderer.prototype.update = function(object, viewport)
 		{
 			child.onUpdate();
 		}
-
-		child.updateMatrix();
 	}
 
+	// Update transformation matrices
+	object.traverse(function(child)
+	{
+		child.updateMatrix();
+	});
+	
 	// Sort objects by layer
 	objects.sort(function(a, b)
 	{
 		return a.layer - b.layer;
 	});
 
-	// Clear canvas
+	// Clear canvas content
 	if(this.autoClear)
 	{
 		this.context.setTransform(1, 0, 0, 1, 0, 0);
@@ -247,13 +267,25 @@ Renderer.prototype.update = function(object, viewport)
 			this.context.save();
 		}
 
+		// Set identity if the viewport transform is to be ignored
 		if(objects[i].ignoreViewport)
 		{
 			this.context.setTransform(1, 0, 0, 1, 0, 0);
 		}
 
-		objects[i].transform(this.context, viewport);
-		objects[i].draw(this.context, viewport);
+		// Apply the object trasnform to the canvas context
+		objects[i].transform(this.context, viewport, this.canvas);
+
+		// Stencil objects
+		if(objects[i].isStencil)
+		{
+			objects[i].clip(this.context, viewport, this.canvas);
+		}
+		// Drawable objects
+		else
+		{
+			objects[i].draw(this.context, viewport, this.canvas);
+		}
 
 		if(objects[i].restoreContextState)
 		{
@@ -273,13 +305,13 @@ export {Renderer};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Stencil.html

@@ -93,7 +93,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line12">line 12</a>
+        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line16">line 16</a>
     </li></ul></dd>
     
 
@@ -140,6 +140,193 @@
 
     
 
+    
+        <h3 class="subsection-title">Methods</h3>
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="clip"><span class="type-signature"></span>clip<span class="signature">(context, viewport, canvas)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+</div>
+
+
+
+
+
+
+
+
+
+    <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>context</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">CanvasContext</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Canvas 2d drawing context.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>viewport</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="Viewport.html">Viewport</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">Viewport applied to the canvas.</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>canvas</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type"><a href="DOM.html">DOM</a></span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM canvas element where the content is being drawn.</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="stencil_Stencil.js.html">stencil/Stencil.js</a>, <a href="stencil_Stencil.js.html#line32">line 32</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
     
 
     
@@ -155,13 +342,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Text.html

@@ -407,13 +407,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/UUID.html

@@ -49,7 +49,7 @@
 
 
 <div class="description">
-    Implements all UUID related methods.
+    Class to implement UUID generation methods.
 </div>
 
 
@@ -187,7 +187,7 @@
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="math_UUID.js.html">math/UUID.js</a>, <a href="math_UUID.js.html#line15">line 15</a>
+        <a href="math_UUID.js.html">math/UUID.js</a>, <a href="math_UUID.js.html#line17">line 17</a>
     </li></ul></dd>
     
 
@@ -221,13 +221,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Vector2.html

@@ -247,13 +247,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.html

@@ -835,13 +835,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/Viewport.js.html

@@ -134,13 +134,13 @@ export {Viewport};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/index.html

@@ -50,13 +50,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Key.js.html

@@ -120,13 +120,13 @@ export {Key};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/input_Pointer.js.html

@@ -437,13 +437,13 @@ export {Pointer};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Box2.js.html

@@ -102,22 +102,36 @@ Box2.prototype.copy = function(box)
 	this.max.copy(box.max);
 };
 
+/**
+ * Check if the box is empty (size equals zero or is negative).
+ *
+ * The box size is condireded valid on two negative axis.
+ */
 Box2.prototype.isEmpty = function()
 {
-	// this is a more robust check for empty than ( volume <= 0 ) because volume can get positive with two negative axes
+
 	return (this.max.x < this.min.x) || (this.max.y < this.min.y);
 };
 
+/**
+ * Calculate the center point of the box.
+ */
 Box2.prototype.getCenter = function(target)
 {
 	return this.isEmpty() ? target.set(0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5);
 };
 
+/**
+ * Get the size of the box.
+ */
 Box2.prototype.getSize = function(target)
 {
 	return this.isEmpty() ? target.set(0, 0) : target.subVectors(this.max, this.min);
 };
 
+/**
+ * Expand the box to contain a new point.
+ */
 Box2.prototype.expandByPoint = function(point)
 {
 	this.min.min(point);
@@ -126,23 +140,45 @@ Box2.prototype.expandByPoint = function(point)
 	return this;
 };
 
+/**
+ * Expand the box by adding a border with the vector size.
+ *
+ * Vector is subtracted from min and added to the max points.
+ */
 Box2.prototype.expandByVector = function(vector)
 {
 	this.min.sub(vector);
 	this.max.add(vector);
 };
 
+/**
+ * Expand the box by adding a border with the scalar value.
+ */
 Box2.prototype.expandByScalar = function(scalar)
 {
 	this.min.addScalar(-scalar);
 	this.max.addScalar(scalar);
 };
 
+/**
+ * Check if the box contains a point inside.
+ *
+ * @param {Vector2} point
+ * @return {boolean} True if the box contains point.
+ */
 Box2.prototype.containsPoint = function(point)
 {
 	return point.x < this.min.x || point.x > this.max.x || point.y < this.min.y || point.y > this.max.y ? false : true;
 };
 
+/**
+ * Check if the box fully contains another box inside (different from intersects box).
+ *
+ * Only returns true if the box is fully contained.
+ *
+ * @param {Box2} box
+ * @return {boolean} True if the box contains box.
+ */
 Box2.prototype.containsBox = function(box)
 {
 	return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y;
@@ -152,6 +188,7 @@ Box2.prototype.containsBox = function(box)
  * Check if two boxes intersect each other, using 4 splitting planes to rule out intersections.
  * 
  * @param {Box2} box
+ * @return {boolean} True if the boxes intersect each other.
  */
 Box2.prototype.intersectsBox = function(box)
 {
@@ -234,13 +271,13 @@ export {Box2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Matrix.js.html

@@ -265,13 +265,13 @@ export {Matrix};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_UUID.js.html

@@ -29,7 +29,7 @@
             <pre class="prettyprint source linenums"><code>"use strict";
 
 /**
- * Implements all UUID related methods.
+ * Class to implement UUID generation methods.
  *
  * @class
  */
@@ -39,6 +39,8 @@ function UUID(){}
  * Generate new random UUID v4 as string.
  *
  * http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+ *
+ * @static
  */
 UUID.generate = (function ()
 {
@@ -75,13 +77,13 @@ export {UUID};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/math_Vector2.js.html

@@ -318,13 +318,13 @@ export {Vector2};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Box.js.html

@@ -78,7 +78,7 @@ Box.prototype.isInside = function(point)
 	return this.box.containsPoint(point);
 };
 
-Box.prototype.draw = function(context)
+Box.prototype.draw = function(context, viewport, canvas)
 {
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
@@ -102,13 +102,13 @@ export {Box};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Circle.js.html

@@ -73,7 +73,7 @@ Circle.prototype.onPointerLeave = function(pointer, viewport)
 	this.fillStyle = "#FFFFFF";
 };
 
-Circle.prototype.draw = function(context)
+Circle.prototype.draw = function(context, viewport, canvas)
 {
 	context.fillStyle = this.fillStyle;
 
@@ -99,13 +99,13 @@ export {Circle};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_DOM.js.html

@@ -66,7 +66,7 @@ function DOM(parent, type)
 
 DOM.prototype = Object.create(Object2D.prototype);
 
-DOM.prototype.draw = function(context, viewport)
+DOM.prototype.draw = function(context, viewport, canvas)
 {
 	// CSS trasnformation matrix
 	var projection = viewport.matrix.clone();
@@ -88,13 +88,13 @@ export {DOM};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Image.js.html

@@ -84,7 +84,7 @@ Image.prototype.isInside = function(point)
 	return this.box.containsPoint(point);
 };
 
-Image.prototype.draw = function(context)
+Image.prototype.draw = function(context, viewport, canvas)
 {
 	context.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, this.box.min.x, this.box.min.y, this.box.max.x - this.box.min.x, this.box.max.y - this.box.min.y);
 };
@@ -100,13 +100,13 @@ export {Image};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Line.js.html

@@ -72,7 +72,7 @@ function Line()
 
 Line.prototype = Object.create(Object2D.prototype);
 
-Line.prototype.draw = function(context)
+Line.prototype.draw = function(context, viewport, canvas)
 {
 	context.lineWidth = this.lineWidth;
 	context.strokeStyle = this.strokeStyle;
@@ -95,13 +95,13 @@ export {Line};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Pattern.js.html

@@ -90,7 +90,7 @@ Pattern.prototype.isInside = function(point)
 	return this.box.containsPoint(point);
 };
 
-Pattern.prototype.draw = function(context, viewport)
+Pattern.prototype.draw = function(context, viewport, canvas)
 {
 	var width = this.box.max.x - this.box.min.x;
 	var height = this.box.max.y - this.box.min.y;
@@ -113,13 +113,13 @@ export {Pattern};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/objects_Text.js.html

@@ -62,7 +62,7 @@ function Text()
 
 Text.prototype = Object.create(Object2D.prototype);
 
-Text.prototype.draw = function(context)
+Text.prototype.draw = function(context, viewport, canvas)
 {
 	context.font = this.font;
 	context.textAlign = this.textAlign;
@@ -82,13 +82,13 @@ export {Text};
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/stencil_BoxStencil.js.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: stencil/BoxStencil.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: stencil/BoxStencil.js</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>"use strict";
+
+import {Stencil} from "./Stencil.js";
+import {Vector2} from "../math/Vector2.js";
+import {Box2} from "../math/Box2.js";
+
+/**
+ * Box stencil can be used to clear a box mask region.
+ *
+ * It will limit the drwaing region to this box.
+ *
+ * @class
+ * @extends {Stencil}
+ */
+function BoxStencil()
+{
+	Stencil.call(this);
+
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * If inverted the stencil considers the outside of the box instead of the inside.
+	 */
+	this.invert = false;
+}
+
+BoxStencil.prototype = Object.create(Stencil.prototype);
+
+BoxStencil.prototype.clip = function(context, viewport, canvas)
+{
+	context.beginPath();
+	
+	var width = this.box.max.x - this.box.min.x;
+	
+	if(this.invert)
+	{	
+		context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
+		context.rect(this.box.max.x, -5e3, 1e4, 1e4);
+		context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
+		context.rect(this.box.min.x, this.box.max.y, width, 1e4);
+	}
+	else
+	{
+		var height = this.box.max.y - this.box.min.y;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
+
+	context.clip();
+};
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>

docs/stencil_Stencil.js.html

@@ -28,6 +28,10 @@
         <article>
             <pre class="prettyprint source linenums"><code>"use strict";
 
+import {Object2D} from "../Object2D.js";
+import {Vector2} from "../math/Vector2.js";
+import {Box2} from "../math/Box2.js";
+
 /**
  * A stencil can be used to set the drawing region.
  *
@@ -40,15 +44,20 @@
 function Stencil()
 {
 	Object2D.call(this);
-	//TODO &lt;ADD CODE HERE>
 }
 
 Stencil.prototype = Object.create(Object2D.prototype);
 
-Stencil.prototype.draw = function(context, viewport)
-{
-	// body...
-};
+Stencil.prototype.isStencil = true;
+
+/**
+ * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
+ *
+ * @param {CanvasContext} context Canvas 2d drawing context.
+ * @param {Viewport} viewport Viewport applied to the canvas.
+ * @param {DOM} canvas DOM canvas element where the content is being drawn.
+ */
+Stencil.prototype.clip = function(context, viewport, canvas){};
 
 export {Stencil};</code></pre>
         </article>
@@ -60,13 +69,13 @@ export {Stencil};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

docs/utils_Helpers.js.html

@@ -149,13 +149,13 @@ export {Helpers};</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Box.html">Box</a></li><li><a href="Box2.html">Box2</a></li><li><a href="BoxStencil.html">BoxStencil</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="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="Matrix.html">Matrix</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="Renderer.html">Renderer</a></li><li><a href="Stencil.html">Stencil</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></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 13:51:53 GMT+0100 (Western European Summer Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 06 2019 15:37:27 GMT+0100 (Western European Summer Time)
 </footer>
 
 <script> prettyPrint(); </script>

source/Object2D.js

@@ -77,6 +77,13 @@ function Object2D()
 	 */
 	this.inverseGlobalMatrix = new Matrix();
 
+	/**
+	 * Masks being applied to this object.
+	 *
+	 * Multiple masks can be used simultaneously.
+	 */
+	this.masks = [];
+
 	/**
 	 * If true the matrix is updated before rendering the object.
 	 */

source/Renderer.js

@@ -220,47 +220,53 @@ Renderer.prototype.update = function(object, viewport)
 	{
 		return a.layer - b.layer;
 	});
-
+	
+	this.context.setTransform(1, 0, 0, 1, 0, 0);
+	
 	// Clear canvas content
 	if(this.autoClear)
 	{
-		this.context.setTransform(1, 0, 0, 1, 0, 0);
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 
-	// Set viewport matrix transform
-	viewport.matrix.setContextTransform(this.context);
-
 	// Render into the canvas
 	for(var i = 0; i < objects.length; i++)
 	{	
+		if(objects[i].isMask)
+		{
+			continue;
+		}
 
-		// Stencil objects
-		if(objects[i].isStencil)
+		if(objects[i].saveContextState)
 		{
-			objects[i].clip(this.context, viewport, this.canvas);
+			this.context.save();
 		}
-		// Drawable objects
-		else
+
+		// Apply all masks
+		var masks = objects[i].masks;
+		for(var j = 0; j < masks.length; j++)
 		{
-			if(objects[i].saveContextState)
+			if(!masks[j].ignoreViewport)
 			{
-				this.context.save();
+				viewport.matrix.setContextTransform(this.context);
 			}
 
-			// Set identity if the viewport transform is to be ignored
-			if(objects[i].ignoreViewport)
-			{
-				this.context.setTransform(1, 0, 0, 1, 0, 0);
-			}
+			masks[j].clip(this.context, viewport, this.canvas);
+		}
+
+		// Set the viewport transform
+		if(!objects[i].ignoreViewport)
+		{
+			viewport.matrix.setContextTransform(this.context);
+		}
 
-			objects[i].transform(this.context, viewport, this.canvas);
-			objects[i].draw(this.context, viewport, this.canvas);
+		// Apply the object transform to the canvas context
+		objects[i].transform(this.context, viewport, this.canvas);
+		objects[i].draw(this.context, viewport, this.canvas);
 
-			if(objects[i].restoreContextState)
-			{
-				this.context.restore();
-			}
+		if(objects[i].restoreContextState)
+		{
+			this.context.restore();
 		}
 	}
 };

source/Trenette.js

@@ -5,7 +5,8 @@ export {Object2D} from "./Object2D.js";
 export {Renderer} from "./Renderer.js";
 export {Viewport} from "./Viewport.js";
 
-export {Stencil} from "./stencil/Stencil.js";
+export {Mask} from "./mask/Mask.js";
+export {BoxMask} from "./mask/BoxMask.js";
 
 export {Key} from "./input/Key.js";
 export {Pointer} from "./input/Pointer.js";

source/mask/BoxMask.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import {Mask} from "./Mask.js";
+import {Vector2} from "../math/Vector2.js";
+import {Box2} from "../math/Box2.js";
+
+/**
+ * Box mask can be used to clear a box mask region.
+ *
+ * It will limit the drwaing region to this box.
+ *
+ * @class
+ * @extends {Mask}
+ */
+function BoxMask()
+{
+	Mask.call(this);
+
+	/**
+	 * Box object containing the size of the object.
+	 */
+	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
+
+	/**
+	 * If inverted the mask considers the outside of the box instead of the inside.
+	 */
+	this.invert = false;
+}
+
+BoxMask.prototype = Object.create(Mask.prototype);
+
+BoxMask.prototype.clip = function(context, viewport, canvas)
+{
+	context.beginPath();
+	
+	var width = this.box.max.x - this.box.min.x;
+	
+	if(this.invert)
+	{	
+		context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
+		context.rect(this.box.max.x, -5e3, 1e4, 1e4);
+		context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
+		context.rect(this.box.min.x, this.box.max.y, width, 1e4);
+	}
+	else
+	{
+		var height = this.box.max.y - this.box.min.y;
+		context.fillRect(this.box.min.x, this.box.min.y, width, height);
+	}
+
+	context.clip();
+};
+
+export {BoxMask};

source/stencil/Stencil.js → source/mask/Mask.js

@@ -5,22 +5,22 @@ import {Vector2} from "../math/Vector2.js";
 import {Box2} from "../math/Box2.js";
 
 /**
- * A stencil can be used to set the drawing region.
+ * A mask can be used to set the drawing region.
  *
- * Stencils are treated as objects their shaphe is used to filter other objects shape.
+ * Masks are treated as objects their shape is used to filter other objects shape.
  *
- * Multiple stencil objects can be active simulatenously.
+ * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
  *
  * @class
  */
-function Stencil()
+function Mask()
 {
 	Object2D.call(this);
 }
 
-Stencil.prototype = Object.create(Object2D.prototype);
+Mask.prototype = Object.create(Object2D.prototype);
 
-Stencil.prototype.isStencil = true;
+Mask.prototype.isMask = true;
 
 /**
  * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
@@ -29,6 +29,6 @@ Stencil.prototype.isStencil = true;
  * @param {Viewport} viewport Viewport applied to the canvas.
  * @param {DOM} canvas DOM canvas element where the content is being drawn.
  */
-Stencil.prototype.clip = function(context, viewport, canvas){};
+Mask.prototype.clip = function(context, viewport, canvas){};
 
-export {Stencil};
+export {Mask};

source/stencil/BoxStencil.js

@@ -1,34 +0,0 @@
-"use strict";
-
-import {Stencil} from "./Stencil.js";
-import {Vector2} from "../math/Vector2.js";
-import {Box2} from "../math/Box2.js";
-
-function BoxStencil()
-{
-	Stencil.call(this);
-
-	/**
-	 * Box object containing the size of the object.
-	 */
-	this.box = new Box2(new Vector2(-50, -35), new Vector2(50, 35));
-
-	/**
-	 * If inverted the stencil considers the outside of the box instead of the inside.
-	 */
-	this.invert = false;
-}
-
-BoxStencil.prototype = Object.create(Stencil.prototype);
-
-BoxStencil.prototype.clip = function(context, viewport, canvas)
-{
-	var width = this.box.max.x - this.box.min.x;
-	
-	context.beginPath();
-	context.rect(this.box.min.x - 1e4, -5e3, 1e4, 1e4);
-	context.rect(this.box.max.x, -5e3, 1e4, 1e4);
-	context.rect(this.box.min.x, this.box.min.y - 1e4, width, 1e4);
-	context.rect(this.box.min.x, this.box.max.y, width, 1e4);
-	context.clip();
-};

source/stencil/ResetStencil.js

@@ -1,13 +0,0 @@
-"use strict";
-
-import {Stencil} from "./Stencil.js";
-import {Vector2} from "../math/Vector2.js";
-import {Box2} from "../math/Box2.js";
-
-function ResetStencil()
-{
-	Stencil.call(this);
-}
-
-ResetStencil.prototype = Object.create(Stencil.prototype);
-