From 8a8d081561832fbd7835689cda848987a8056ddf Mon Sep 17 00:00:00 2001
From: Fu Zhen <fuzhen@maptalks.org>
Date: Thu, 26 Nov 2015 22:31:35 +0800
Subject: [PATCH 1/4] when drawImage a empty C2S context

Null pointer error will be thrown when ctx.drawImage(ctx) with an empty C2S context with no childNodes.

These code may fix the problem.
---
 canvas2svg.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/canvas2svg.js b/canvas2svg.js
index 0964b39..db95bab 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -1038,17 +1038,21 @@
             //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
             //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
             svg = image.getSvg();
-            defs = svg.childNodes[0];
-            while(defs.childNodes.length) {
-                id = defs.childNodes[0].getAttribute("id");
-                this.__ids[id] = id;
-                this.__defs.appendChild(defs.childNodes[0]);
+            if (svg.childNodes && svg.childNodes.length > 1) {
+                defs = svg.childNodes[0];
+                while(defs.childNodes.length) {
+                    id = defs.childNodes[0].getAttribute("id");
+                    this.__ids[id] = id;
+                    this.__defs.appendChild(defs.childNodes[0]);
+                }
+                group = svg.childNodes[1];
+                if (group) {
+                    parent.appendChild(group);
+                    this.__currentElement = group;
+                    this.translate(dx, dy);
+                    this.__currentElement = currentElement;
+                }
             }
-            group = svg.childNodes[1];
-            parent.appendChild(group);
-            this.__currentElement = group;
-            this.translate(dx, dy);
-            this.__currentElement = currentElement;
         } else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {
             //canvas or image
             svgImage = this.__createElement("image");

From 1e101b54a92d7c4d0694340e5d018836aae8525d Mon Sep 17 00:00:00 2001
From: Fu Zhen <fuzhen@maptalks.org>
Date: Thu, 26 Nov 2015 22:44:33 +0800
Subject: [PATCH 2/4] setLineDash

an additional not implemented method: setLineDash.
---
 canvas2svg.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/canvas2svg.js b/canvas2svg.js
index db95bab..fb56e82 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -1112,7 +1112,8 @@
     ctx.prototype.putImageData = function(){};
     ctx.prototype.globalCompositeOperation = function(){};
     ctx.prototype.setTransform = function(){};
-
+    ctx.prototype.setLineDash = function(){};
+    
     //add options for alternative namespace
     if (typeof window === "object") {
         window.C2S = ctx;

From 9ee9cc2e6cf30f8525a17b9bb2db8dd1b6974207 Mon Sep 17 00:00:00 2001
From: Fu Zhen <fuzhen@maptalks.org>
Date: Fri, 27 Nov 2015 03:34:03 +0800
Subject: [PATCH 3/4] implements setLineDash

implements canvas.setLineDash
---
 canvas2svg.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/canvas2svg.js b/canvas2svg.js
index fb56e82..1d790bc 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -167,6 +167,12 @@
         },
         "textBaseline":{
             canvas : "alphabetic"
+        },
+        "lineDash" : {
+            svgAttr : "stroke-dasharray",
+            canvas : [],
+            svg : null,
+            apply : "stroke"
         }
     };
 
@@ -1102,7 +1108,15 @@
         }
         return new CanvasPattern(pattern, this);
     };
-
+    
+    ctx.prototype.setLineDash = function(dashArray) {
+        if (dashArray && dashArray.length > 0) {
+            this.lineDash = dashArray.join(",");
+        } else {
+            this.lineDash = null;
+        }
+    };
+    
     /**
      * Not yet implemented
      */
@@ -1112,7 +1126,6 @@
     ctx.prototype.putImageData = function(){};
     ctx.prototype.globalCompositeOperation = function(){};
     ctx.prototype.setTransform = function(){};
-    ctx.prototype.setLineDash = function(){};
     
     //add options for alternative namespace
     if (typeof window === "object") {

From c29f752612f5f6f26045cb4b1a0bcca1f30eeddb Mon Sep 17 00:00:00 2001
From: fuzhen <fuzhen@maptalks.org>
Date: Fri, 27 Nov 2015 12:58:41 +0800
Subject: [PATCH 4/4] add example of setLineDash

---
 test/example/setLineDash.js | 12 ++++++++++++
 test/playground.html        |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 test/example/setLineDash.js

diff --git a/test/example/setLineDash.js b/test/example/setLineDash.js
new file mode 100644
index 0000000..7b09cdc
--- /dev/null
+++ b/test/example/setLineDash.js
@@ -0,0 +1,12 @@
+window.C2S_EXAMPLES['setLineDash'] = function(ctx) {
+    ctx.save();
+    ctx.lineWidth = 4;
+    for (var i = 0; i < 10; i++){
+        ctx.setLineDash([(i+1)*5,10]);
+        ctx.beginPath();
+        ctx.moveTo(5+i*14,5);
+        ctx.lineTo(5+i*14,140);
+        ctx.stroke();
+    }
+    ctx.restore();
+};
\ No newline at end of file
diff --git a/test/playground.html b/test/playground.html
index ab1cad2..67cf143 100644
--- a/test/playground.html
+++ b/test/playground.html
@@ -20,7 +20,7 @@
         <div class="row">
             <div class="twelve columns">
                 <!-- select content is generated by the command `gulp update_examples` -->
-                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
+                <select id="select" class="u-full-width"><option value="arc">arc</option><option value="arcTo">arcTo</option><option value="arcTo2">arcTo2</option><option value="emptyArc">emptyArc</option><option value="fillstyle">fillstyle</option><option value="globalalpha">globalalpha</option><option value="gradient">gradient</option><option value="linecap">linecap</option><option value="linewidth">linewidth</option><option value="setLineDash">setLineDash</option><option value="rgba">rgba</option><option value="saveandrestore">saveandrestore</option><option value="text">text</option><option value="tiger">tiger</option></select>
             </div>
         </div>
     </form>
@@ -64,7 +64,7 @@
 </script>
 
 <!-- examples content is generated by the command `gulp update_examples` -->
-<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
+<div id="examples"><script type="text/javascript" src="example/arc.js"></script><script type="text/javascript" src="example/arcTo.js"></script><script type="text/javascript" src="example/arcTo2.js"></script><script type="text/javascript" src="example/emptyArc.js"></script><script type="text/javascript" src="example/fillstyle.js"></script><script type="text/javascript" src="example/globalalpha.js"></script><script type="text/javascript" src="example/gradient.js"></script><script type="text/javascript" src="example/linecap.js"></script><script type="text/javascript" src="example/linewidth.js"></script><script type="text/javascript" src="example/setLineDash.js"></script><script type="text/javascript" src="example/rgba.js"></script><script type="text/javascript" src="example/saveandrestore.js"></script><script type="text/javascript" src="example/text.js"></script><script type="text/javascript" src="example/tiger.js"></script></div>
 
 <script type="text/javascript">
     (function () {