Fix CreateJS#571

Author: varyndev

src/easeljs/display/Text.js

@@ -69,31 +69,31 @@ this.createjs = this.createjs||{};
 	 **/
 	function Text(text, font, color) {
 		this.DisplayObject_constructor();
-		
-		
+
+
 	// public properties:
 		/**
 		 * The text to display.
 		 * @property text
 		 * @type String
 		 **/
 		this.text = text;
-	
+
 		/**
 		 * The font style to use. Any valid value for the CSS font attribute is acceptable (ex. "bold 36px Arial").
 		 * @property font
 		 * @type String
 		 **/
 		this.font = font;
-	
+
 		/**
 		 * The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. "#F00"). Default is "#000".
 		 * It will also accept valid canvas fillStyle values.
 		 * @property color
 		 * @type String
 		 **/
 		this.color = color;
-	
+
 		/**
 		 * The horizontal text alignment. Any of "start", "end", "left", "right", and "center". For detailed
 		 * information view the
@@ -103,7 +103,7 @@ this.createjs = this.createjs||{};
 		 * @type String
 		 **/
 		this.textAlign = "left";
-	
+
 		/**
 		 * The vertical alignment point on the font. Any of "top", "hanging", "middle", "alphabetic", "ideographic", or
 		 * "bottom". For detailed information view the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles">
@@ -112,7 +112,7 @@ this.createjs = this.createjs||{};
 		 * @type String
 		*/
 		this.textBaseline = "top";
-	
+
 		/**
 		 * The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or
 		 * shrunk to make it fit in this width. For detailed information view the
@@ -122,36 +122,50 @@ this.createjs = this.createjs||{};
 		 * @type Number
 		*/
 		this.maxWidth = null;
-	
+
 		/**
 		 * If greater than 0, the text will be drawn as a stroke (outline) of the specified width.
 		 * @property outline
 		 * @type Number
 		 **/
 		this.outline = 0;
-	
+
 		/**
 		 * Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0,
 		 * the value of getMeasuredLineHeight is used.
 		 * @property lineHeight
 		 * @type Number
 		 **/
 		this.lineHeight = 0;
-	
+
 		/**
 		 * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,
 		 * the text will not be wrapped.
 		 * @property lineWidth
 		 * @type Number
 		 **/
 		this.lineWidth = null;
+
+		/**
+		 * The type of corner created, when two lines meet.  Any of "bevel", "round", and "miter". Default is "miter".
+		 * @property lineJoin
+		 * @type String
+		 **/
+		this.lineJoin = "miter";
+
+		/**
+		 * The miter length is the distance between the inner corner and the outer corner where two lines meet. Default is 10.
+		 * @property miterLimit
+		 * @type Number
+		 **/
+		this.miterLimit = 10;
 	}
 	var p = createjs.extend(Text, createjs.DisplayObject);
 
 	// TODO: deprecated
 	// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.
 
-	
+
 // static properties:
 	/**
 	 * @property _workingContext
@@ -160,8 +174,8 @@ this.createjs = this.createjs||{};
 	 **/
 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
 	if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }
-	
-	
+
+
 // constants:
 	/**
 	 * Lookup table for the ratio to offset bounds x calculations based on the textAlign property.
@@ -171,7 +185,7 @@ this.createjs = this.createjs||{};
 	 * @static
 	 **/
 	Text.H_OFFSETS = {start: 0, left: 0, center: -0.5, end: -1, right: -1};
-	
+
 	/**
 	 * Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.
 	 * @property H_OFFSETS
@@ -209,9 +223,14 @@ this.createjs = this.createjs||{};
 		if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }
 
 		var col = this.color || "#000";
-		if (this.outline) { ctx.strokeStyle = col; ctx.lineWidth = this.outline*1; }
+		if (this.outline) {
+			ctx.strokeStyle = col;
+			ctx.lineWidth = this.outline*1;
+			ctx.miterLimit = this.miterLimit;
+			ctx.lineJoin = this.lineJoin;
+		}
 		else { ctx.fillStyle = col; }
-		
+
 		this._drawText(this._prepContext(ctx));
 		return true;
 	};
@@ -259,7 +278,7 @@ this.createjs = this.createjs||{};
 		var y = lineHeight * Text.V_OFFSETS[this.textBaseline||"top"];
 		return this._rectangle.setValues(x, y, w, o.height);
 	};
-	
+
 	/**
 	 * Returns an object with width, height, and lines properties. The width and height are the visual width and height
 	 * of the drawn text. The lines property contains an array of strings, one for
@@ -344,19 +363,19 @@ this.createjs = this.createjs||{};
 			this._prepContext(ctx);
 		}
 		var lineHeight = this.lineHeight||this.getMeasuredLineHeight();
-		
+
 		var maxW = 0, count = 0;
 		var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);
 		for (var i=0, l=hardLines.length; i<l; i++) {
 			var str = hardLines[i];
 			var w = null;
-			
+
 			if (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {
 				// text wrapping:
 				var words = str.split(/(\s)/);
 				str = words[0];
 				w = ctx.measureText(str).width;
-				
+
 				for (var j=1, jl=words.length; j<jl; j+=2) {
 					// Line needs to wrap:
 					var wordW = ctx.measureText(words[j] + words[j+1]).width;
@@ -373,14 +392,14 @@ this.createjs = this.createjs||{};
 					}
 				}
 			}
-			
+
 			if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }
 			if (lines) { lines.push(str); }
 			if (o && w == null) { w = ctx.measureText(str).width; }
 			if (w > maxW) { maxW = w; }
 			count++;
 		}
-		
+
 		if (o) {
 			o.width = maxW;
 			o.height = count*lineHeight;
@@ -401,8 +420,8 @@ this.createjs = this.createjs||{};
 		if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }
 		else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }
 	};
-	
-	
+
+
 	/**
 	 * @method _getMeasuredWidth
 	 * @param {String} text