From 170b8c574d20a85013c339c74a781b41a46efcbf Mon Sep 17 00:00:00 2001
From: fuzhen <fuzhen@maptalks.org>
Date: Thu, 17 Dec 2015 02:12:48 +0800
Subject: [PATCH] 1. clear entire canvas when clearRect(0,0, canvas.width,
 canvas.height), this removes unnecessary white rects generated by clearRect
 when clearing canvas.

2. clone child SVG node at first before drawImage(c2s, x, y) to prevent unwanted updates by parent C2S context.
---
 canvas2svg.js | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/canvas2svg.js b/canvas2svg.js
index 8df3fc0..77f2897 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -776,10 +776,38 @@
     };
 
 
+    /**
+     * Clear entire canvas:
+     * 1. save current transforms
+     * 2. remove all the childNodes of the root g element
+     */
+    ctx.prototype.__clearCanvas = function() {
+        var current = this.__closestGroupOrSvg(),
+            transform = current.getAttribute("transform");
+        var rootGroup = this.__root.childNodes[1];
+        var childNodes = rootGroup.childNodes;
+        for (var i = childNodes.length - 1; i >= 0; i--) {
+            if (childNodes[i]) {
+                rootGroup.removeChild(childNodes[i]);
+            }
+        }
+        this.__currentElement = rootGroup;
+        this.__stack = [this.__getStyleState()];
+        this.__groupStack = [];
+        if (transform) {
+            this.__addTransform(transform);
+        }
+    };
+
     /**
      * "Clears" a canvas by just drawing a white rectangle in the current group.
      */
     ctx.prototype.clearRect = function(x, y, width, height) {
+        //clear entire canvas
+        if (x === 0 && y === 0 && width === this.width && height === this.height) {
+            this.__clearCanvas();
+            return;
+        }
         var rect, parent = this.__closestGroupOrSvg();
         rect = this.__createElement("rect", {
             x : x,
@@ -1043,7 +1071,7 @@
         if(image instanceof ctx) {
             //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();
+            svg = image.getSvg().cloneNode(true);
             if (svg.childNodes && svg.childNodes.length > 1) {
                 defs = svg.childNodes[0];
                 while(defs.childNodes.length) {
@@ -1053,10 +1081,8 @@
                 }
                 group = svg.childNodes[1];
                 if (group) {
+                    group.setAttribute("transform",["translate(",dx,",",dy,")"].join(""));
                     parent.appendChild(group);
-                    this.__currentElement = group;
-                    this.translate(dx, dy);
-                    this.__currentElement = currentElement;
                 }
             }
         } else if(image.nodeName === "CANVAS" || image.nodeName === "IMG") {