Filters

build/escher.js

@@ -2476,6 +2476,7 @@
 		if (this.recenterViewport === ViewportControls.RECENTER_CANVAS) {
 			var centerWorld = new Vector2(pointer.canvas.width / 2.0, pointer.canvas.height / 2.0);
 			centerWorld = this.viewport.inverseMatrix.transformPoint(centerWorld);
+			
 			this.viewport.center.copy(centerWorld);
 			this.viewport.matrixNeedsUpdate = true;
 		} 
@@ -2483,6 +2484,7 @@
 		else if(this.recenterViewport === ViewportControls.RECENTER_POINTER)
 		{
 			var pointerWorld = this.viewport.inverseMatrix.transformPoint(pointer.position);
+
 			this.viewport.center.copy(pointerWorld);
 			this.viewport.matrixNeedsUpdate = true;
 		}
@@ -2570,18 +2572,23 @@
 	 */
 	function Renderer(canvas, options)
 	{
-		if(options === undefined)
-		{
-			options =
-			{
-				alpha: true,
-				disableContextMenu: true,
-				imageSmoothingEnabled: true,
-				imageSmoothingQuality: "low",
-				globalCompositeOperation: "source-over"
-			};
-		}
+		// Default options
+		var defaultOptions =
+		{
+			alpha: true,
+			disableContextMenu: true,
+			imageSmoothingEnabled: true,
+			imageSmoothingQuality: "low",
+			globalAlpha: 1.0,
+			// "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor"
+			globalCompositeOperation: "source-over", 
+			 // "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
+			textRendering: "auto",
+			filter: null
+		};
 
+		options = options ? Object.assign(defaultOptions, options) : defaultOptions;
+		
 		/**
 		 * Event manager for DOM events created by the renderer.
 		 * 
@@ -2631,6 +2638,9 @@
 		this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
 		this.context.imageSmoothingQuality = options.imageSmoothingQuality;
 		this.context.globalCompositeOperation = options.globalCompositeOperation;
+		this.context.globalAlpha = options.globalAlpha;
+		this.context.textRendering = options.textRendering;
+		this.context.filter = options.filter;
 
 		/**
 		 * Pointer input handler object, automatically updated by the renderer.

source/Renderer.js

@@ -16,18 +16,23 @@ import {EventManager} from "./utils/EventManager";
  */
 function Renderer(canvas, options)
 {
-	if(options === undefined)
+	// Default options
+	var defaultOptions =
 	{
-		options =
-		{
-			alpha: true,
-			disableContextMenu: true,
-			imageSmoothingEnabled: true,
-			imageSmoothingQuality: "low",
-			globalCompositeOperation: "source-over"
-		};
-	}
-
+		alpha: true,
+		disableContextMenu: true,
+		imageSmoothingEnabled: true,
+		imageSmoothingQuality: "low",
+		globalAlpha: 1.0,
+		// "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor"
+		globalCompositeOperation: "source-over", 
+		 // "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
+		textRendering: "auto",
+		filter: null
+	};
+
+	options = options ? Object.assign(defaultOptions, options) : defaultOptions;
+	
 	/**
 	 * Event manager for DOM events created by the renderer.
 	 * 
@@ -77,6 +82,9 @@ function Renderer(canvas, options)
 	this.context.imageSmoothingEnabled = options.imageSmoothingEnabled;
 	this.context.imageSmoothingQuality = options.imageSmoothingQuality;
 	this.context.globalCompositeOperation = options.globalCompositeOperation;
+	this.context.globalAlpha = options.globalAlpha;
+	this.context.textRendering = options.textRendering;
+	this.context.filter = options.filter;
 
 	/**
 	 * Pointer input handler object, automatically updated by the renderer.

source/controls/ViewportControls.js

@@ -168,13 +168,15 @@ ViewportControls.prototype.update = function(pointer)
 	if (this.recenterViewport === ViewportControls.RECENTER_CANVAS) {
 		var centerWorld = new Vector2(pointer.canvas.width / 2.0, pointer.canvas.height / 2.0);
 		centerWorld = this.viewport.inverseMatrix.transformPoint(centerWorld);
+		
 		this.viewport.center.copy(centerWorld);
 		this.viewport.matrixNeedsUpdate = true;
 	} 
 	// Center viewport on pointer
 	else if(this.recenterViewport === ViewportControls.RECENTER_POINTER)
 	{
-		var pointerWorld = this.viewport.inverseMatrix.transformPoint(pointer.position)
+		var pointerWorld = this.viewport.inverseMatrix.transformPoint(pointer.position);
+
 		this.viewport.center.copy(pointerWorld);
 		this.viewport.matrixNeedsUpdate = true;
 	}