implement styling of fill/stroke/strokeWidth when using Font.draw() or Glyph.draw()

README.md

@@ -194,10 +194,11 @@ Create a Path that represents the given text.
 * `fontSize`: Size of the text in pixels (default: `72`).
 
 Options is an optional object containing:
-* `kerning`: if true takes kerning information into account (default: `true`)
+* `kerning`: if `true`, takes kerning information into account (default: `true`)
 * `features`: an object with [OpenType feature tags](https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags) as keys, and a boolean value to enable each feature.
 Currently only ligature features `"liga"` and `"rlig"` are supported (default: `true`).
 * `hinting`: if true uses TrueType font hinting if available (default: `false`).
+* `style`: An object of possible styling properties (fill, stroke, strokeWidth) applied to the resulting Path
 
 _**Note:** there is also `Font.getPaths()` with the same arguments, which returns a list of Paths._
 
@@ -213,6 +214,7 @@ Options is an optional object containing:
 * `features`: an object with [OpenType feature tags](https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags) as keys, and a boolean value to enable each feature.
 Currently only ligature features `"liga"` and `"rlig"` are supported (default: `true`).
 * `hinting`: if true uses TrueType font hinting if available (default: `false`).
+* `style`: An object of possible styling properties (fill, stroke, strokeWidth) applied to the resulting Path
 
 #### `Font.drawPoints(ctx, text, x, y, fontSize, options)`
 Draw the points of all glyphs in the text. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as `Font.draw()`.

src/font.js

@@ -366,6 +366,10 @@ Font.prototype.getPath = function(text, x, y, fontSize, options) {
         const glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
         fullPath.extend(glyphPath);
     });
+
+    if ( options.style !== undefined ) {
+        fullPath.applyStyles(options.style);
+    }
     return fullPath;
 };
 

src/glyph.js

@@ -187,6 +187,10 @@ Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
         }
     }
 
+    if ( options.style !== undefined ) {
+        p.applyStyles(options.style);
+    }
+
     return p;
 };
 

src/path.js

@@ -658,4 +658,22 @@ Path.prototype.toDOMElement = function(options, pathData) {
     return newPath;
 };
 
+/**
+ * Apply styles to the path
+ * @param  {object} [styles] - Styles object {fill,stroke,strokeWidth}
+ * @return {Path}
+ */
+Path.prototype.applyStyles = function(styles) {
+    if ( styles !== undefined ) {
+        const pathStyles = ['fill','stroke','strokeWidth'];
+        for(let s = 0; s < pathStyles.length; s++) {
+            const styleProp = pathStyles[s];
+            if ( styles[styleProp] !== undefined ) {
+                this[styleProp] = styles[styleProp];
+            }
+        }
+    }
+    return this;
+};
+
 export default Path;

test/font.js

@@ -92,6 +92,22 @@ describe('font.js', function() {
         });
 
     });
+
+    describe('style handling', function() {
+        let font;
+
+        before(function() {
+            font = loadSync('./test/fonts/Roboto-Black.ttf');
+        });
+
+        it('should apply style options to the path', function() {
+            const options = {
+                style: { fill: '#ffaa00' }
+            };
+            const path = font.getPath('X', 0, 0, 72, options);
+            assert.equal(path.fill, '#ffaa00');
+        });
+    });
 
     describe('hasChar', function() {
         it('returns correct results for non-CMAP fonts', function() {

test/glyph.js

@@ -133,6 +133,24 @@ describe('glyph.js', function() {
             });
         });
     });
+
+    describe('style handling', function() {
+        let font;
+        let glyph;
+
+        before(function() {
+            font = loadSync('./test/fonts/Roboto-Black.ttf');
+            glyph = font.charToGlyph('A');
+        });
+
+        it('should apply style options to the path', function() {
+            const options = {
+                style: { fill: '#ffaa00' }
+            };
+            const path = glyph.getPath(0, 0, 72, options, font);
+            assert.equal(path.fill, '#ffaa00');
+        });
+    });
 });
 
 describe('glyph.js on low memory mode', function() {

test/path.js

@@ -153,6 +153,20 @@ describe('path.js', function() {
         emptyPath.fill = 'black';
         assert.equal(emptyPath.toDOMElement().getAttribute('fill'), undefined);
     });
+
+    it('should apply styles via applyStyles()', function() {
+        const styles = {
+            fill: '#ffaa00',
+            stroke: '#6600aa',
+            strokeWidth: 5
+        };
+        emptyPath.applyStyles(styles);
+        assert.deepEqual({
+            fill: emptyPath.fill,
+            stroke: emptyPath.stroke,
+            strokeWidth: emptyPath.strokeWidth
+        }, styles);
+    });
 
     after(() => {
         delete global.document;