Merge pull request #20 from zenozeng/master

use currentDefaultPath instead of <path>'s d attribute, fixes stroke's different behavior in SVG and canvas.

canvas2svg.js

@@ -57,14 +57,14 @@
         lookup["\\xa0"] = ' ';
         return lookup;
     }
-    
+
     //helper function to map canvas-textAlign to svg-textAnchor
     function getTextAnchor(textAlign) {
         //TODO: support rtl languages
         var mapping = {"left":"start", "right":"end", "center":"middle", "start":"start", "end":"end"};
         return mapping[textAlign] || mapping.start;
     }
-    
+
     //helper function to map canvas-textBaseline to svg-dominantBaseline
     function getDominantBaseline(textBaseline) {
         //INFO: not supported in all browsers
@@ -260,7 +260,6 @@
         //also add a group child. the svg element can't use the transform attribute
         this.__currentElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
         this.__root.appendChild(this.__currentElement);
-
     };
 
     /**
@@ -504,29 +503,37 @@
      */
     ctx.prototype.beginPath = function(){
         var path, parent;
+
+        // Note that there is only one current default path, it is not part of the drawing state.
+        // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
+        this.__currentDefaultPath = "";
+
         path = this.__createElement("path", {}, true);
         parent = this.__closestGroupOrSvg();
         parent.appendChild(path);
         this.__currentElement = path;
     };
 
+    /**
+     * Helper function to apply currentDefaultPath to current path element
+     * @private
+     */
+    ctx.prototype.__applyCurrentDefaultPath = function() {
+        if(this.__currentElement.nodeName === "path") {
+            var d = this.__currentDefaultPath;
+            this.__currentElement.setAttribute("d", d);
+        } else {
+            throw new Error("Attempted to apply path command to node " + this.__currentElement.nodeName);
+        }
+    };
+
     /**
      * Helper function to add path command
      * @private
      */
     ctx.prototype.__addPathCommand = function(command){
-        if(this.__currentElement.nodeName === "path") {
-            var d = this.__currentElement.getAttribute("d");
-            if(d) {
-                d += " ";
-            } else {
-                d = "";
-            }
-            d += command;
-            this.__currentElement.setAttribute("d", d);
-        } else {
-            throw new Error("Attempted to add path command to node " + this.__currentElement.nodeName);
-        }
+        this.__currentDefaultPath += " ";
+        this.__currentDefaultPath += command;
     };
 
     /**
@@ -573,6 +580,7 @@
      * Sets the stroke property on the current element
      */
     ctx.prototype.stroke = function(){
+        this.__applyCurrentDefaultPath();
         this.__applyStyleToCurrentElement("stroke");
     };
 
@@ -580,6 +588,7 @@
      * Sets fill properties on the current element
      */
     ctx.prototype.fill = function(){
+        this.__applyCurrentDefaultPath();
         this.__applyStyleToCurrentElement("fill");
     };
 
@@ -704,12 +713,12 @@
             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;