Update README.md

.gitignore

@@ -0,0 +1 @@
+examples

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+examples
+bower.json

README.md

@@ -1,2 +1,67 @@
 CanvasTextWrapper
 =================
+
+##Syntax
+```
+new CanvasTextWrapper(HTMLCanvasElement, String [, options]);
+```
+
+```options``` - is a JavaScript 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.
+
+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.
+
+##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" 
+    } 
+```
+
+##Usage
+Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before using CanvasTextWrapper like so:
+``` 
+var canvas = document.createElement('canvas');
+canvas.width = 300;
+canvas.height = 250;
+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",
+});
+```
+
+##Examples
+http://namniak.github.io/CanvasTextWrapper/
+
+##Installation
+
+```
+bower install canvas-text-wrapper
+
+npm install canvas-text-wrapper
+```

bower.json

@@ -10,5 +10,9 @@
         "node_modules",
         "README.md"
     ],
-    "homepage": "https://github.com/namniak/CanvasTextWrapper.git"
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/namniak/CanvasTextWrapper.git"
+    },
+    "homepage": "http://namniak.github.io/CanvasTextWrapper/"
 }

examples/css/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}

examples/css/styles.css

@@ -1,136 +0,0 @@
-body {
-    width: 960px;
-    margin: auto;
-    font-family: 'Open Sans', sans-serif;
-    color: #fff;
-}
-
-div, header, footer, article {
-    box-sizing: border-box;
-}
-
-header, footer, article {
-    width: 930px;
-    margin: auto;
-    background-color: #0D9F69;
-    padding: 20px;
-}
-
-header {
-    font-size: 60px;
-    font-weight: 700;
-}
-
-.description {
-    width: 800px;
-    margin-top: 20px;
-    font-size: 22px;
-    font-weight: normal;
-}
-
-footer {
-    margin-top: 40px;
-}
-
-a {
-    font-size: 20px;
-    font-weight: normal;
-    color: #fff;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-article {
-    border-top: 1px solid #fff;
-}
-
-.white-block {
-    display: table-cell;
-    height: 30px;
-    padding: 20px;
-    vertical-align: middle;
-    background-color: #fff;
-    font-weight: 100;
-    color: #0D9F69;
-    line-height: 120%;
-}
-
-p {
-    margin: 10px 0;
-    line-height: 120%;
-}
-
-h2 {
-    font-size: 30px;
-}
-
-h6 {
-    font-weight: 700;
-    text-decoration: underline;
-    display: inline;
-}
-
-.syntax {
-    padding: 10px 10px 0 20px;
-}
-
-.syntax > li {
-    list-style: none;
-    margin-bottom: 15px;
-}
-
-.values li {
-    text-indent: 20px;
-    list-style: inside circle;
-    line-height: 120%;
-}
-
-section {
-    margin-top: 40px;
-}
-
-section > div {
-    display: inline-block;
-    position: relative;
-    width: 450px;
-    margin: 15px;
-    border: 1px solid #0D9F69;
-    overflow: hidden;
-}
-
-section h2 {
-    color: #0D9F69;
-    text-indent: 30px;
-    margin-bottom: 20px;
-}
-
-section > div div {
-    width: 100%;
-    height: 200px;
-    background-color: #0D9F69;
-    margin-top: 250px;
-    padding: 20px;
-}
-
-canvas, img {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-img {
-    width: 100%;
-    z-index: -1;
-}
-
-span {
-    margin-left: 20px;
-}
-
-span, .emph {
-    font-weight: 600;
-    display: inline;
-}

examples/index.html

@@ -1,125 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta charset="utf-8">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/reset.css">
-    <link rel="stylesheet" href="css/styles.css">
-    <script src="js/CanvasTextWrapper.js"></script>
-    <script src="js/options.js"></script>
-    <script src="js/examples.js"></script>
-    <title>CanvasTextWrapper.js</title>
-</head>
-<body>
-<header>
-    <p>CanvasTextWrapper.js</p>
-
-    <p class="description">
-        JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
-        optional alignments and padding.
-    </p>
-</header>
-<article>
-    <h2>Syntax:</h2><br/>
-
-    <p class="white-block">new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
-
-    <div>
-        <div class="emph">OPTIONS</div>
-        - is a JavaScript object with the following available properties and values:
-    </div>
-    <ul class="syntax">
-        <li>
-            <div class="emph">font</div>
-            (String) - text style that includes font size, family, etc. specified similarly to CSS
-            font shorthand property
-        </li>
-        <li>
-            <div class="emph">textAlign</div>
-            (String) - horizontal alignment that applies for each line
-            <ul class="values">
-                <li>"left"</li>
-                <li>"center"</li>
-                <li>"right"</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">verticalAlign</div>
-            (String) - vertical alignment that applies on a whole block of text
-            <ul class="values">
-                <li>"top"</li>
-                <li>"middle"</li>
-                <li>"bottom"</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">paddingX</div>
-            (Number) - horizontal padding in pixels set equally on both, left and right sides of
-            the element
-        </li>
-        <li>
-            <div class="emph">paddingY</div>
-            (Number) - vertical padding in pixels set equally on both, top and bottom sides of the element
-        </li>
-        <li>
-            <div class="emph">fitParent</div>
-            (Boolean) - parameter that controls which element to fit
-            <ul class="values">
-                <li>true - fit canvas parent's width instead of canvas own width</li>
-                <li>false - fit canvas width</li>
-            </ul>
-        </li>
-        <li>
-            <div class="emph">lineBreak</div>
-            (String) - text split rule
-            <ul class="values">
-                <li>"auto" - text fills the element's width going to a new line on a whole word when no more space</li>
-                <li>"word" - each next word will be placed on a new line</li>
-            </ul>
-            <p>
-                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.
-            </p>
-        </li>
-    </ul>
-</article>
-<article>
-    <h2>Defaults & Usage:</h2><br/>
-
-    <p>The default options object which values will be used if a property is not specified or no object is passed:</p>
-
-    <p class="white-block">
-        {&nbsp;font: "18px Arial, sans-serif",<br/>
-        &nbsp;&nbsp;&nbsp;textAlign: "left",<br/>
-        &nbsp;&nbsp;&nbsp;verticalAlign: "top",<br/>
-        &nbsp;&nbsp;&nbsp;paddingX: 0,<br/>
-        &nbsp;&nbsp;&nbsp;paddingY: 0,<br/>
-        &nbsp;&nbsp;&nbsp;fitParent: false,<br/>
-        &nbsp;&nbsp;&nbsp;lineBreak: "auto"&nbsp;}
-    </p>
-    <br/>
-
-    <p>
-        Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before
-        using CanvasTextWrapper like so:
-    </p>
-
-    <p class="white-block">
-        var canvas = document.createElement('canvas');<br/>
-        canvas.width = 300;<br/>
-        canvas.height = 250;<br/>
-        context = canvas.getContext("2d");<br/>
-        context.fillStyle = "rgb(255, 255, 255)";<br/>
-        context.fillRect(0, 0, canvas.width, canvas.height);<br/><br/>
-        context.globalCompositeOperation = "destination-out";<br/>
-        var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply<br/>
-    </p>
-</article>
-<section>
-    <h2>Examples:</h2>
-</section>
-<footer>
-    &larr;&nbsp;<a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
-</footer>
-</body>
-</html>

examples/js/CanvasTextWrapper.js

@@ -1,171 +0,0 @@
-/*! CanvasTextWrapper (https://github.com/namniak/CanvasTextWrapper)
- *  Version:  0.1.0
- *
- *  MIT License (http://www.opensource.org/licenses/mit-license.html)
- *  Copyright (c) 2014 Vadim Namniak
- */
-
-(function() {
-    '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
-    };
-
-    window.CanvasTextWrapper = function(canvas, text, opts) {
-        if (!(this instanceof CanvasTextWrapper)) {
-            throw new TypeError('CanvasTextWrapper constructor failed. Use "new" keyword when instantiating.');
-        }
-
-        this.canvas = canvas;
-        this.text = text;
-
-        // set options to specified or default values
-        for (var property in defaultOptions) {
-            this[property] = (opts && opts[property]) ? opts[property] : defaultOptions[property];
-        }
-
-        // extract font size
-        this.lineHeight = parseInt(this.font.replace(/^\D+/g, ''), 10);
-
-        // validate all set properties
-        this.validate();
-
-        // basic context settings
-        this.context = this.canvas.getContext('2d');
-        this.context.font = this.font;
-        this.context.textBaseline = 'bottom';
-
-        this.drawText();
-    };
-
-    CanvasTextWrapper.prototype = {
-
-        drawText: function() {
-            var canvas = this.canvas;
-            var context = canvas.getContext('2d');
-
-            var elementWidth = (this.fitParent === false) ? canvas.width : canvas.parentNode.clientWidth;
-            var maxTextLength = elementWidth - (this.paddingX * 2);
-
-            var words = this.text.split(/\s+/);
-            var lines = [];
-            var textPos = {
-                x: 0,
-                y: 0
-            };
-
-            this.checkWordsLength(context, words, maxTextLength);
-            this.breakTextIntoLines(context, lines, words, maxTextLength);
-
-            // height of the broken down into lines text
-            var textBlockHeight = lines.length * this.lineHeight;
-
-            // set vertical align for the whole text block
-            this.setTextVerticalAlign(textPos, textBlockHeight);
-
-            for (var i = 0; i < lines.length; i++) {
-                this.setTextHorizontalAlign(context, textPos, elementWidth, lines[i]);
-
-                textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight);
-                context.fillText(lines[i], textPos.x, textPos.y);
-            }
-        },
-
-        checkWordsLength: function(context, words, maxTextLength) {
-            for (var i = 0; i < words.length; i++) {
-                var testString = '';
-                var tokenLen = context.measureText(words[i]).width;
-
-                // 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];
-                    }
-
-                    // 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);
-                }
-            }
-        },
-
-        breakTextIntoLines: function(context, lines, words, maxTextLength) {
-            for (var i = 0, j = 0; i < words.length; j++) {
-                lines[j] = '';
-
-                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++;
-                }
-            }
-        },
-
-        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;
-            }
-        },
-
-        setTextVerticalAlign: function(textPos, textBlockHeight) {
-            var elementHeight = (this.fitParent === false) ? this.canvas.height : this.canvas.parentNode.clientHeight;
-
-            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;
-            }
-        },
-
-        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".');
-            }
-        }
-    };
-})();

examples/js/examples.js

@@ -1,76 +0,0 @@
-document.onreadystatechange = function() {
-    if (document.readyState === 'complete') {
-
-        (function() {
-            var container = document.getElementsByTagName('section')[0];
-            var w = 448;
-            var h = 250;
-            var aspectRatio = 0;
-            var text = 'Canvas text wrapping example';
-
-            var img = new Image();
-            img.src = 'img/bg.jpg';
-            img.onload = function() {
-                aspectRatio = img.naturalWidth / img.naturalHeight;
-                createExamples();
-            };
-
-            // use options.js file
-            var options = optionsArr;
-
-            function createExamples() {
-                var fragment = new DocumentFragment();
-                var context;
-
-                for (var i = 0; i < options.length; i++) {
-                    var exampleItem = document.createElement('div');
-                    fragment.appendChild(exampleItem);
-
-                    // draw canvas image
-                    var canvasImg = document.createElement('canvas');
-                    canvasImg.width = w;
-                    canvasImg.height = h;
-                    context = canvasImg.getContext('2d');
-                    context.drawImage(img, 0, 0, w, w * aspectRatio);
-                    exampleItem.appendChild(canvasImg);
-
-                    // create canvas mask layer
-                    var canvasMask = document.createElement('canvas');
-                    canvasMask.width = w;
-                    canvasMask.height = h;
-                    context = canvasMask.getContext('2d');
-                    context.fillStyle = 'rgba(255,255,255, 1)';
-                    context.fillRect(0, 0, w, h);
-                    exampleItem.appendChild(canvasMask);
-
-                    // create text to be cut out mask layer
-                    context.fillStyle = '#212121';
-                    context.globalCompositeOperation = 'destination-out';
-
-                    // create wrapper
-                    new CanvasTextWrapper(canvasMask, ('#' + (i + 1) + ' ' + text), options[i]);
-
-                    // create hint code block
-                    var hint = document.createElement('div');
-                    exampleItem.appendChild(hint);
-                    var optionsData = '';
-
-                    // read used properties
-                    for (var property in options[i]) {
-                        var stringWrapper = (property == 'paddingX' || property == 'paddingY') ? '' : '"';
-                        optionsData += '         <span>' + property + '</span>: ' +
-                            stringWrapper + options[i][property] + stringWrapper + ',<br/>';
-                    }
-
-                    // print example code
-                    hint.innerHTML = '<h6>CODE:</h6><p>' +
-                        'new CanvasTextWrapper(canvasEl, textStr, {<br/>' + optionsData + '});' +
-                        '</p>';
-                }
-
-                // inject document fragment into actual DOM
-                container.appendChild(fragment);
-            }
-        })();
-    }
-};

examples/js/options.js

@@ -1,54 +0,0 @@
-(function() {
-    window.optionsArr = [
-        {
-            font: 'bold 55px Open Sans, sans-serif',
-            paddingX: 0,
-            paddingY: 0,
-            fitParent: false,
-            lineBreak: 'auto'
-        },
-        {
-            font: 'normal 40px Open Sans, sans-serif',
-            textAlign: 'center',
-            verticalAlign: 'top',
-            paddingY: 10,
-            lineBreak: 'word'
-        },
-        {
-            font: 'bold 55px Open Sans, sans-serif',
-            textAlign: 'right',
-            verticalAlign: 'bottom',
-            paddingX: 30
-        },
-        {
-            font: 'bold 35px Open Sans, sans-serif',
-            textAlign: 'center',
-            verticalAlign: 'middle'
-        },
-        {
-            font: 'bold 55px Open Sans, sans-serif',
-            textAlign: 'right',
-            verticalAlign: 'top',
-            paddingX: 15,
-            paddingY: 5
-        },
-        {
-            font: 'bold 45px Open Sans, sans-serif',
-            textAlign: 'center',
-            verticalAlign: 'middle',
-            lineBreak: 'word'
-        },
-        {
-            font: 'bold 25px Open Sans, sans-serif',
-            verticalAlign: 'bottom',
-            paddingX: 10,
-            paddingY: 60
-        },
-        {
-            font: '50px Open Sans, sans-serif',
-            textAlign: 'right',
-            verticalAlign: 'middle',
-            paddingX: 15
-        }
-    ];
-})();

package.json

@@ -1,9 +1,10 @@
 {
   "name": "canvas-text-wrapper",
-  "description": "Javascript canvas text wrapper that automatically breaks the text into lines on a rule of your choice with available horizontal and vertical align options.",
-  "version": "0.1.0",
+  "description": "JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with optional alignments and padding.",
+  "version": "0.1.1",
   "license": "MIT",
   "main": "CanvasTextWrapper.min.js",
+  "homepage": "http://namniak.github.io/CanvasTextWrapper/",
   "repository": {
     "type": "git",
     "url": "https://github.com/namniak/CanvasTextWrapper"