updated to v0.3.1

Fixed bug with numeric value of font-weight

.gitignore

@@ -1 +1,2 @@
-examples
+examples/
+.idea/

CanvasTextWrapper.js

@@ -1,172 +1,288 @@
-/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper)
- *  Version:  0.1.0
- *
+/*! CanvasTextWrapper
+ *  https://github.com/namniak/CanvasTextWrapper
+ *  Version:  0.3.0
  *  MIT License (http://www.opensource.org/licenses/mit-license.html)
  *  Copyright (c) 2014 Vadim Namniak
  */
 
 (function() {
-    'use strict';
+	'use strict';
 
-    var defaultOptions = {
-        font: '18px Arial, sans-serif',
-        textAlign: 'left',     // each line of text is aligned left
-        verticalAlign: 'top',  // text lines block is aligned top
-        paddingX: 0,           // zero px left & right text padding relative to canvas or parent
-        paddingY: 0,           // zero px top & bottom text padding relative to canvas or parent
-        fitParent: false,      // text is tested to fit canvas width
-        lineBreak: 'auto'      // text fills the element's (canvas or parent) width going to a new line on a whole word
-    };
+	var EL_WIDTH,EL_HEIGHT,MAX_TXT_WIDTH,MAX_TXT_HEIGHT;
 
-    window.CanvasTextWrapper = function(canvas, text, opts) {
+	var defaults = {
+		font: '18px Arial, sans-serif',
+		sizeToFill: false,      // text is resized to fill the container (given font size is ignored)
+		lineHeight: 1,          // default line height equivalent of '100%'
+		allowNewLine: true,     // breaks text on every new line character '\n'
+		lineBreak: 'auto',      // text fills the element's (canvas or parent) width going to a new line on a whole word
+		textAlign: 'left',      // each line of text is aligned left
+		verticalAlign: 'top',   // text lines block is aligned top
+		justifyLines: false,    // lines are not justified
+		paddingX: 0,            // 0px left & right text padding relatively to canvas or its container
+		paddingY: 0,            // 0px top & bottom text padding relatively to canvas or its container
+		fitParent: false,       // text is set to fit canvas width
+		strokeText: false       // text is stroked according to context configuration
+	};
 
-        if (!(this instanceof CanvasTextWrapper)) {
-            throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.');
-        }
+	var CanvasTextWrapper = function(canvas,text,options) {
+		if (!(this instanceof CanvasTextWrapper)) {
+			return new CanvasTextWrapper(canvas,text,options);
+		}
 
-        this.canvas = canvas;
-        this.text = text;
+		this.canvas = canvas;
+		this.text = text;
+		this.context = this.canvas.getContext('2d');
+		this.context.font = this.font;
+		this.context.textBaseline = 'bottom';
 
-        // set options to specified or default values
-        for (var property in defaultOptions) {
-            this[property] = (opts && opts[property]) ? opts[property] : defaultOptions[property];
-        }
+		for (var property in defaults) {
+			if (defaults.hasOwnProperty(property)) {
+				this[property] = (options && options[property]) ? options[property] : defaults[property];
+			}
+		}
 
-        // extract font size
-        this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10);
+		EL_WIDTH = (this.fitParent === false) ? this.canvas.width : this.canvas.parentNode.clientWidth;
+		EL_HEIGHT = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
+		MAX_TXT_WIDTH = EL_WIDTH - (this.paddingX * 2);
+		MAX_TXT_HEIGHT = EL_HEIGHT - (this.paddingY * 2);
 
-        // validate all set properties
-        this.validate();
+		this._init();
+	};
 
-        // basic context settings
-        this.context = this.canvas.getContext('2d');
-        this.context.font = this.font;
-        this.context.textBaseline = 'bottom';
+	CanvasTextWrapper.prototype = {
+		_init: function() {
+			/* Substituting this line that causing a bug with font-weight numeric values	*/
+			//this.fontSize = parseInt(this.font.replace(/^\D+/g,''),10) || 18;
 
-        this.drawText();
-    };
+			/* This line allow font values like : "italic 500 25px" to preserve both numeric a literal value of font-weight*/
+			this.fontSize = this.font.match(/\d+(px|em|\%)/g) ? +this.font.match(/\d+(px|em|\%)/g)[0].match(/\d+/g) : 18;
 
-    CanvasTextWrapper.prototype = {
+			this.textBlockHeight = 0;
+			this.lines = [];
+			this.newLineIndexes = [];
+			this.textPos = {x: 0,y: 0};
 
-        drawText: function() {
-            var canvas = this.canvas;
-            var context = canvas.getContext('2d');
+			this._setFont(this.fontSize);
+			this._setLineHeight();
+			this._validate();
+			this._render();
+		},
 
-            var elementWidth = (this.fitParent === false) ? canvas.width : canvas.parentNode.clientWidth;
-            var maxTextLength = elementWidth - (this.paddingX * 2);
+		_render: function() {
+			if (this.sizeToFill) {
+				var numWords = this.text.trim().split(/\s+/).length;
+				var fontSize = 0;
 
-            var words = this.text.split(/\s+/);
-            var lines = [];
-            var textPos = {
-                x: 0,
-                y: 0
-            };
+				do {
+					this._setFont(++fontSize);
+					this.lineHeight = this.fontSize;
+					this._wrap();
+				} while (this.textBlockHeight < MAX_TXT_HEIGHT && (this.lines.join(' ').split(/\s+/).length == numWords));
 
-            this.checkWordsLength(context, words, maxTextLength);
-            this.breakTextIntoLines(context, lines, words, maxTextLength);
+				this._setFont(--fontSize);
+				this.lineHeight = this.fontSize;
+			} else {
+				this._wrap();
+			}
 
-            // height of the broken down into lines text
-            var textBlockHeight = lines.length * this.lineHeight;
+			if (this.justifyLines && this.lineBreak === 'auto') {
+				this._justify();
+			}
 
-            // set vertical align for the whole text block
-            this.setTextVerticalAlign(textPos, textBlockHeight);
+			this._setAlignY();
+			this._drawText();
+		},
 
-            for (var i = 0; i < lines.length; i++) {
-                this.setTextHorizontalAlign(context, textPos, elementWidth, lines[i]);
+		_setFont: function(fontSize) {
+			var fontParts = (!this.sizeToFill) ? this.font.split(/\b\d+px\b/i) : this.context.font.split(/\b\d+px\b/i);
+			this.context.font = fontParts[0] + fontSize + 'px' + fontParts[1];
+			this.fontSize = fontSize;
+		},
 
-                textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight);
-                context.fillText(lines[i], textPos.x, textPos.y);
-            }
-        },
+		_setLineHeight: function() {
+			if (!isNaN(this.lineHeight)) {
+				this.lineHeight = this.fontSize * this.lineHeight;
+			} else if (this.lineHeight.toString().indexOf('px') !== -1) {
+				this.lineHeight = parseInt(this.lineHeight);
+			} else if (this.lineHeight.toString().indexOf('%') !== -1) {
+				this.lineHeight = (parseInt(this.lineHeight) / 100) * this.fontSize;
+			}
+		},
 
-        checkWordsLength: function(context, words, maxTextLength) {
-            for (var i = 0; i < words.length; i++) {
-                var testString = '';
-                var tokenLen = context.measureText(words[i]).width;
+		_wrap: function() {
+			if (this.allowNewLine) {
+				var newLines = this.text.trim().split('\n');
+				for (var i = 0,idx = 0; i < newLines.length - 1; i++) {
+					idx += newLines[i].trim().split(/\s+/).length;
+					this.newLineIndexes.push(idx)
+				}
+			}
 
-                // check if a word exceeds the element's width
-                if (tokenLen > maxTextLength) {
-                    for (var k = 0; (context.measureText(testString + words[i][k]).width <= maxTextLength) && (k < words[i].length); k++) {
-                        testString += words[i][k];
-                    }
+			var words = this.text.trim().split(/\s+/);
+			this._checkLength(words);
+			this._breakText(words);
 
-                    // break the word because it's too  long
-                    var sliced = words[i].slice(0, k);
-                    var leftover = words[i].slice(k);
-                    words.splice(i, 1, sliced, leftover);
-                }
-            }
-        },
+			this.textBlockHeight = this.lines.length * this.lineHeight;
+		},
 
-        breakTextIntoLines: function(context, lines, words, maxTextLength) {
-            for (var i = 0, j = 0; i < words.length; j++) {
-                lines[j] = '';
+		_checkLength: function(words) {
+			var testString,tokenLen,sliced,leftover;
 
-                if (this.lineBreak === 'auto') {
-                    // put as many full words in a line as can fit element
-                    while ((context.measureText(lines[j] + words[i]).width <= maxTextLength) && (i < words.length)) {
-                        lines[j] += words[i] + ' ';
-                        i++;
-                    }
-                    lines[j] = lines[j].trim();
-                } else if (this.lineBreak === 'word') {
-                    // put each next word in a new line
-                    lines[j] = words[i];
-                    i++;
-                }
-            }
-        },
+			for (var i = 0; i < words.length; i++) {
+				testString = '';
+				tokenLen = this.context.measureText(words[i]).width;
 
-        setTextHorizontalAlign: function(context, textPos, elementWidth, line) {
-            if (this.textAlign === 'center') {
-                textPos.x = (elementWidth - context.measureText(line).width) / 2;
-            } else if (this.textAlign === 'right') {
-                textPos.x = elementWidth - context.measureText(line).width - this.paddingX;
-            } else {
-                textPos.x = this.paddingX;
-            }
-        },
+				if (tokenLen > MAX_TXT_WIDTH) {
+					for (var k = 0; (this.context.measureText(testString + words[i][k]).width <= MAX_TXT_WIDTH) && (k < words[i].length); k++) {
+						testString += words[i][k];
+					}
 
-        setTextVerticalAlign: function(textPos, textBlockHeight) {
-            var elementHeight = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
+					sliced = words[i].slice(0,k);
+					leftover = words[i].slice(k);
+					words.splice(i,1,sliced,leftover);
+				}
+			}
+		},
 
-            if (this.verticalAlign === 'middle') {
-                textPos.y = (elementHeight - textBlockHeight) / 2;
-            } else if (this.verticalAlign === 'bottom') {
-                textPos.y = elementHeight - textBlockHeight - this.paddingY;
-            } else {
-                textPos.y = this.paddingY;
-            }
-        },
+		_breakText: function(words) {
+			for (var i = 0,j = 0; i < words.length; j++) {
+				this.lines[j] = '';
 
-        validate: function() {
-            if (!(this.canvas instanceof HTMLCanvasElement)) {
-                throw new TypeError('From CanvasTextWrapper(): Element passed as the first parameter is not an instance of HTMLCanvasElement.');
-            }
-            if (typeof this.text !== 'string') {
-                throw new TypeError('From CanvasTextWrapper(): The second, dedicated for the text, parameter must be a string.');
-            }
-            if (isNaN(this.lineHeight)) {
-                throw new TypeError('From CanvasTextWrapper(): Cannot parse font size as an Integer. Check "font" property\'s value.');
-            }
-            if (this.textAlign !== 'left' && this.textAlign !== 'center' && this.textAlign !== 'right') {
-                throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal align value is used. Property "textAlign" can only be set to "left", "center", or "right".');
-            }
-            if (this.verticalAlign !== 'top' && this.verticalAlign !== 'middle' && this.verticalAlign !== 'bottom') {
-                throw new TypeError('From CanvasTextWrapper(): Unsupported vertical align value is used. Property "verticalAlign" can only be set to "top", "middle", or "bottom".');
-            }
-            if (isNaN(this.paddingX)) {
-                throw new TypeError('From CanvasTextWrapper(): Unsupported horizontal padding value is used. Property "paddingX" must be set to a number');
-            }
-            if (isNaN(this.paddingY)) {
-                throw new TypeError('From CanvasTextWrapper(): Unsupported vertical padding value is used. Property "paddingY" must be set to a number.');
-            }
-            if (typeof this.fitParent !== 'boolean') {
-                throw new TypeError('From CanvasTextWrapper(): Property "fitParent" must be set to a Boolean.');
-            }
-            if (this.lineBreak !== 'auto' && this.lineBreak !== 'word') {
-                throw new TypeError('From CanvasTextWrapper(): Unsupported line break value is used. Property "lineBreak" can only be set to "auto", or "word".');
-            }
-        }
-    };
+				if (this.lineBreak === 'auto') {
+					while ((this.context.measureText(this.lines[j] + words[i]).width <= MAX_TXT_WIDTH) && (i < words.length)) {
+
+						this.lines[j] += words[i] + ' ';
+						i++;
+
+						if (this.allowNewLine) {
+							for (var k = 0; k < this.newLineIndexes.length; k++) {
+								if (this.newLineIndexes[k] === i) {
+									j++;
+									this.lines[j] = '';
+									break;
+								}
+							}
+						}
+					}
+					this.lines[j] = this.lines[j].trim();
+				} else {
+					this.lines[j] = words[i];
+					i++;
+				}
+			}
+		},
+
+		_justify: function() {
+			var maxLen,longestLineIndex,tokenLen;
+			for (var i = 0; i < this.lines.length; i++) {
+				tokenLen = this.context.measureText(this.lines[i]).width;
+
+				if (!maxLen || tokenLen > maxLen) {
+					maxLen = tokenLen;
+					longestLineIndex = i;
+				}
+			}
+
+			// fill lines with extra spaces
+			var numWords,spaceLength,numOfSpaces,num,filler;
+			var delimiter = '\u200A';
+			for (i = 0; i < this.lines.length; i++) {
+				if (i === longestLineIndex) continue;
+
+				numWords = this.lines[i].trim().split(/\s+/).length;
+				if (numWords <= 1) continue;
+
+				this.lines[i] = this.lines[i].trim().split(/\s+/).join(delimiter);
+
+				spaceLength = this.context.measureText(delimiter).width;
+				numOfSpaces = (maxLen - this.context.measureText(this.lines[i]).width) / spaceLength;
+				num = numOfSpaces / (numWords - 1);
+
+				filler = '';
+				for (var j = 0; j < num; j++) {
+					filler += delimiter;
+				}
+
+				this.lines[i] = this.lines[i].trim().split(delimiter).join(filler);
+				//console.log('numWords:', numWords, 'numOfSpaces:', numOfSpaces, 'num:', num);
+			}
+		},
+
+		_drawText: function() {
+			for (var i = 0; i < this.lines.length; i++) {
+				this._setAlignX(this.lines[i]);
+
+				this.textPos.y = parseInt(this.textPos.y) + this.lineHeight;
+				this.context.fillText(this.lines[i],this.textPos.x,this.textPos.y);
+
+				if (this.strokeText) {
+					this.context.strokeText(this.lines[i],this.textPos.x,this.textPos.y);
+				}
+			}
+		},
+
+		_setAlignX: function(line) {
+			if (this.textAlign == 'center') {
+				this.textPos.x = (EL_WIDTH - this.context.measureText(line).width) / 2;
+			} else if (this.textAlign == 'right') {
+				this.textPos.x = EL_WIDTH - this.context.measureText(line).width - this.paddingX;
+			} else {
+				this.textPos.x = this.paddingX;
+			}
+		},
+
+		_setAlignY: function() {
+			if (this.verticalAlign == 'middle') {
+				this.textPos.y = (EL_HEIGHT - this.textBlockHeight) / 2;
+			} else if (this.verticalAlign == 'bottom') {
+				this.textPos.y = EL_HEIGHT - this.textBlockHeight - this.paddingY;
+			} else {
+				this.textPos.y = this.paddingY;
+			}
+		},
+
+		_validate: function() {
+			if (!(this.canvas instanceof HTMLCanvasElement))
+				throw new TypeError('The first parameter must be an instance of HTMLCanvasElement.');
+
+			if (typeof this.text !== 'string')
+				throw new TypeError('The second parameter must be a string.');
+
+			if (isNaN(this.fontSize))
+				throw new TypeError('Cannot parse "font".');
+
+			if (isNaN(this.lineHeight))
+				throw new TypeError('Cannot parse "lineHeight".');
+
+			if (this.textAlign.toLocaleLowerCase() !== 'left' && this.textAlign.toLocaleLowerCase() !== 'center' && this.textAlign.toLocaleLowerCase() !== 'right')
+				throw new TypeError('Property "textAlign" must be set to either "left", "center", or "right".');
+
+			if (this.verticalAlign.toLocaleLowerCase() !== 'top' && this.verticalAlign.toLocaleLowerCase() !== 'middle' && this.verticalAlign.toLocaleLowerCase() !== 'bottom')
+				throw new TypeError('Property "verticalAlign" must be set to either "top", "middle", or "bottom".');
+
+			if (typeof this.justifyLines !== 'boolean')
+				throw new TypeError('Property "justifyLines" must be set to a Boolean.');
+
+			if (isNaN(this.paddingX))
+				throw new TypeError('Property "paddingX" must be set to a Number.');
+
+			if (isNaN(this.paddingY))
+				throw new TypeError('Property "paddingY" must be set to a Number.');
+
+			if (typeof this.fitParent !== 'boolean')
+				throw new TypeError('Property "fitParent" must be set to a Boolean.');
+
+			if (this.lineBreak.toLocaleLowerCase() !== 'auto' && this.lineBreak.toLocaleLowerCase() !== 'word')
+				throw new TypeError('Property "lineBreak" must be set to either "auto" or "word".');
+
+			if (typeof this.sizeToFill !== 'boolean')
+				throw new TypeError('Property "sizeToFill" must be set to a Boolean.');
+
+			if (typeof this.strokeText !== 'boolean')
+				throw new TypeError('Property "strokeText" must be set to a Boolean.');
+		}
+	};
+
+	window.CanvasTextWrapper = CanvasTextWrapper;
 })();

README.md

@@ -6,53 +6,51 @@ CanvasTextWrapper
 new CanvasTextWrapper(HTMLCanvasElement, String [, options]);
 ```
 
-```options``` - is a JavaScript object with the following available properties and values:
+```options``` - is an object with the following available properties and values:
 
-- ```font: String``` - text style that includes font size in px (REQUIRED), weight & family, similar to CSS font shorthand property
-- ```textAlign: "left" | "center" | "right"``` - horizontal alignment that applies for each line
-- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment that applies on a whole block of text
-- ```paddingX: Number``` - horizontal padding in pixels set equally on both, left and right sides of the element
-- ```paddingY: Number``` - vertical padding in pixels set equally on both, top and bottom sides of the element
-- ```fitParent: Boolean``` - parameter that controls which element to fit where ```true``` means fit canvas parent's width instead of canvas own width
-- ```lineBreak: "auto" | "word"``` - text split rule. When using ```"auto"```, text fills the element's width going to a new line on a whole word when no more space. If ```"word"``` is set as value, each next word will be placed on a new line.
+- ```font:``` (String) - text style that includes font size in px, font weight, font family, etc. Similar to CSS font shorthand property
+- ```lineHeight:``` (String or Number) - Number means n times font size where 1 is equivalent to '100%'. Also the property can be set in "%" or "px" using String
+- ```textAlign: "left" | "center" | "right"``` - horizontal alignment of each line
+- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment of the whole text block
+- ```paddingX:``` (Number) - horizontal padding (in px) set equally on both, left and right sides
+- ```paddingY:``` (Number) - vertical padding (in px) set equally on both, top and bottom sides
+- ```fitParent:``` (Boolean) - if enabled, text will fit canvas container's width instead of canvas own width
+- ```lineBreak: "auto" | "word"``` - text split rule. When using ```"auto"```, text goes to a next line on a whole word when there's no more room. If ```"word"``` is set as value, each next word will be placed on a new line.
+- ```sizeToFill:``` (Boolean) - ignore given font size and line height and resize text to fill its padded container
+- ```strokeText:``` (Boolean) - outline text based on context configuration
+- ```justifyLines:``` (Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are ignored).
+- ```allowNewLine:``` (Boolean) if enabled, the text breaks on every new line character "\n" otherwise it'll be considered as a space
 
-NOTE: if a single word is too long to fit the width with specified font size, it will be broken into as many lines as required on any letter without specific word breaking rule.
+NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter unless ```sizeToFill``` option is enabled.
 
 ##Defaults
-
-The default options object which values will be used if a property is not specified or no object is passed:
-
 ``` 
    { 
-       font:          "18px Arial, sans-serif",
-       textAlign:     "left",
-       verticalAlign: "top",
-       paddingX:       0,
-       paddingY:       0,
-       fitParent:      false,
-       lineBreak:     "auto" 
-    } 
+        font: "18px Arial, sans-serif",
+        lineHeight: 1,
+        textAlign: "left",
+        verticalAlign: "top",
+        paddingX: 0,
+        paddingY: 0,
+        fitParent: false,
+        lineBreak: "auto",
+        strokeText: false
+        sizeToFill: false,
+        allowNewLine: true,
+        justifyLines: false
+    }
 ```
 
 ##Usage
-Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before using CanvasTextWrapper like so:
+Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
 ``` 
-var canvas = document.createElement('canvas');
-canvas.width = 300;
-canvas.height = 250;
+var canvas = document.getElementById("#canvasText");
+canvas.width = 200;
+canvas.height = 200;
 context = canvas.getContext("2d");
-context.fillStyle = "rgb(255, 255, 255)";
-context.fillRect(0, 0, canvas.width, canvas.height);
-
-context.globalCompositeOperation = "destination-out";
-
-new CanvasTextWrapper(canvas, "Hi there", {
-      font:          "normal 40px Open Sans, sans-serif",
-      textAlign:     "center",
-      verticalAlign: "bottom",
-      paddingY:      10,
-      lineBreak:     "word",
-});
+context.lineWidth = 2;
+context.strokeStyle = "#ff0000";
+CanvasTextWrapper(canvas,"Hello");    //default options will apply
 ```
 
 ##Examples

bower.json

@@ -1,18 +1,18 @@
 {
-    "name": "canvas-text-wrapper",
-    "version": "0.1.0",
-    "ignore": [
-        "**/.*",
-        "**/*.log",
-        "**/*.json",
-        "Gruntfile.js",
-        "examples",
-        "node_modules",
-        "README.md"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/namniak/CanvasTextWrapper.git"
-    },
-    "homepage": "http://namniak.github.io/CanvasTextWrapper/"
+  "name": "canvas-text-wrapper",
+  "version": "0.3.1",
+  "ignore": [
+    "**/.*",
+    "**/*.log",
+    "**/*.json",
+    "Gruntfile.js",
+    "examples",
+    "node_modules",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/namniak/CanvasTextWrapper.git"
+  },
+  "homepage": "http://namniak.github.io/CanvasTextWrapper/"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-text-wrapper",
-  "description": "JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with optional alignments and padding.",
-  "version": "0.1.1",
+  "description": "Pure JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with alignment and padding.",
+  "version": "0.3.1",
   "license": "MIT",
   "main": "CanvasTextWrapper.min.js",
   "homepage": "http://namniak.github.io/CanvasTextWrapper/",
@@ -13,4 +13,4 @@
   "bugs": {
     "url": "https://github.com/namniak/CanvasTextWrapper/issues"
   }
-}
+}