Merge pull request #11 from Validark/main

Use browser's built-in font parser

context.js

@@ -908,52 +908,6 @@ export default (function () {
 
     };
 
-    /**
-     * Parses the font string and returns svg mapping
-     * @private
-     */
-    Context.prototype.__parseFont = function () {
-        var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
-        var fontPart = regex.exec( this.font );
-        var data = {
-            style : fontPart[1] || 'normal',
-            size : fontPart[4] || '10px',
-            family : fontPart[6] || 'sans-serif',
-            weight: fontPart[3] || 'normal',
-            decoration : fontPart[2] || 'normal',
-            href : null
-        };
-
-        //canvas doesn't support underline natively, but we can pass this attribute
-        if (this.__fontUnderline === "underline") {
-            data.decoration = "underline";
-        }
-
-        //canvas also doesn't support linking, but we can pass this as well
-        if (this.__fontHref) {
-            data.href = this.__fontHref;
-        }
-
-        return data;
-    };
-
-    /**
-     * Helper to link text fragments
-     * @param font
-     * @param element
-     * @return {*}
-     * @private
-     */
-    Context.prototype.__wrapTextLink = function (font, element) {
-        if (font.href) {
-            var a = this.__createElement("a");
-            a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
-            a.appendChild(element);
-            return a;
-        }
-        return element;
-    };
-
     /**
      * Fills or strokes text
      * @param text
@@ -963,16 +917,21 @@ export default (function () {
      * @private
      */
     Context.prototype.__applyText = function (text, x, y, action) {
-        var font = this.__parseFont(),
+        var el = document.createElement("span");
+        el.setAttribute("style", 'font:' + this.font);
+
+        var style = el.style, // CSSStyleDeclaration object
             parent = this.__closestGroupOrSvg(),
             textElement = this.__createElement("text", {
-                "font-family" : font.family,
+                "font-family": style.fontFamily,
-                "font-size" : font.size,
+                "font-size": style.fontSize,
-                "font-style" : font.style,
+                "font-style": style.fontStyle,
-                "font-weight" : font.weight,
+                "font-weight": style.fontWeight,
-                "text-decoration" : font.decoration,
+
-                "x" : x,
+                // canvas doesn't support underline natively, but we do :)
-                "y" : y,
+                "text-decoration": this.__fontUnderline,
+                "x": x,
+                "y": y,
                 "text-anchor": getTextAnchor(this.textAlign),
                 "dominant-baseline": getDominantBaseline(this.textBaseline)
             }, true);
@@ -981,7 +940,16 @@ export default (function () {
         this.__currentElement = textElement;
         this.__applyTransformation(textElement);
         this.__applyStyleToCurrentElement(action);
-        parent.appendChild(this.__wrapTextLink(font,textElement));
+
+        if (this.__fontHref) {
+            var a = this.__createElement("a");
+            // canvas doesn't natively support linking, but we do :)
+            a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", this.__fontHref);
+            a.appendChild(textElement);
+            textElement = a;
+        }
+
+        parent.appendChild(textElement);
     };
 
     /**