added stroke text

index.html

@@ -82,7 +82,15 @@
             (Boolean) - auto font size to fill text container
             <ul class="values">
                 <li>"true" - ignore given font size and resize text to fill its padded container</li>
-                <li>"true" - use specified or default font size</li>
+                <li>"false" - use specified or default font size</li>
+            </ul>
+        </li>
+        <li>
+            <div class="emph">strokeText</div>
+            (Boolean) - text outline based on context configuration (make sure it doesn't contradict with other context settings such as globalCompositeOperation, etc)
+            <ul class="values">
+                <li>"true" - enable text outline</li>
+                <li>"false" - enable text outline</li>
             </ul>
         </li>
         <p>

js/CanvasTextWrapper.js

@@ -16,7 +16,8 @@
         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
-        sizeToFill: false      // text is resized to fill the container (given font size is ignored)
+        sizeToFill: false,     // text is resized to fill the container (given font size is ignored)
+        strokeText: false      // text is stroked according to context configuration.
     };
 
     window.CanvasTextWrapper = function(canvas, text, opts) {
@@ -82,6 +83,9 @@
 
                 textPos.y = parseInt(textPos.y) + parseInt(this.lineHeight);
                 this.context.fillText(lines[i], textPos.x, textPos.y);
+                if (this.strokeText) {
+                    this.context.strokeText(lines[i], textPos.x, textPos.y);
+                }
             }
         },
 
@@ -194,6 +198,9 @@
             if (typeof this.sizeToFill !== 'boolean') {
                 throw new TypeError('From CanvasTextWrapper(): Property "sizeToFill" must be set to a Boolean.');
             }
+            if (typeof this.strokeText !== 'boolean') {
+                throw new TypeError('From CanvasTextWrapper(): Property "strokeText" must be set to a Boolean.');
+            }
         }
     };
 })();

js/examples.js

@@ -43,9 +43,18 @@ document.onreadystatechange = function() {
                     context.fillRect(0, 0, w, h);
                     exampleItem.appendChild(canvasMask);
 
-                    // create text to be cut out mask layer
-                    context.fillStyle = '#212121';
-                    context.globalCompositeOperation = 'destination-out';
+                    if (i < options.length -1) {
+                        // create text to be cut out mask layer
+                        context.fillStyle = '#212121';
+                        context.globalCompositeOperation = 'destination-out';
+                    } else {
+                        // make stroke gradient
+                        var gradient=context.createLinearGradient(0,0,canvasImg.width,0);
+                        gradient.addColorStop("0","#ffff00");
+                        gradient.addColorStop("1.0","red");
+                        context.strokeStyle=gradient;
+                        context.lineWidth = 3;
+                    }
 
                     // create wrapper
                     new CanvasTextWrapper(canvasMask, ('#' + (i + 1) + ' ' + text), options[i]);

js/options.js

@@ -21,16 +21,16 @@
             verticalAlign: 'middle'
         },
         {
+            textAlign: 'center',
+            verticalAlign: 'middle',
+            sizeToFill: true
+        },
+                {
             font: 'bold 50px Tahoma, Geneva, sans-serif',
             textAlign: 'right',
             paddingX: 25,
-            paddingY: 25
+            paddingY: 25,
+            strokeText: true
         },
-        {
-            textAlign: 'center',
-            verticalAlign: 'middle',
-            //lineBreak: 'word',
-            sizeToFill: true
-        }
     ];
 })();