better toDataURL for shapes

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Some `Konva.Transformer` fixes
 * Typescript fixes
 * `stage.toDataURL()` fixes when it has hidden layers
+* `shape.toDataURL()` automatically adjust position and size of resulted image
 
 ## [2.1.7][2018-07-03]
 

src/Node.js

@@ -1582,17 +1582,16 @@
     _toKonvaCanvas: function(config) {
       config = config || {};
 
+      var box = this.getClientRect();
+
       var stage = this.getStage(),
-        x = config.x || 0,
+        x = config.x || box.x,
-        y = config.y || 0,
+        y = config.y || box.y,
         pixelRatio = config.pixelRatio || 1,
         canvas = new Konva.SceneCanvas({
-          width:
+          width: config.width || box.width || (stage ? stage.getWidth() : 0),
-            config.width || this.getWidth() || (stage ? stage.getWidth() : 0),
           height:
-            config.height ||
+            config.height || box.height || (stage ? stage.getHeight() : 0),
-            this.getHeight() ||
-            (stage ? stage.getHeight() : 0),
           pixelRatio: pixelRatio
         }),
         context = canvas.getContext();

test/unit/BaseLayer-test.js

@@ -1,6 +1,7 @@
 suite('BaseLayer', function() {
   // ======================================================
   test('width and height', function() {
+    Konva.showWarnings = false;
     var stage = addStage();
 
     var layer = new Konva.FastLayer();
@@ -52,5 +53,6 @@ suite('BaseLayer', function() {
       stage.height(),
       'while layer is on stage changing height doing nothing'
     );
+    Konva.showWarnings = true;
   });
 });

test/unit/Node-test.js

@@ -292,7 +292,7 @@ suite('Node', function() {
 
   // ======================================================
   test('toDataURL + HDPI', function(done) {
-    this.timeout(5000);
+    // this.timeout(5000);
     var oldRatio = Konva.pixelRatio;
     Konva.pixelRatio = 2;
 
@@ -338,6 +338,49 @@ suite('Node', function() {
     });
   });
 
+  // ======================================================
+  test('toDataURL of moved shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      fill: 'green',
+      radius: 50
+    });
+    layer.add(circle);
+
+    var oldURL = circle.toDataURL();
+
+    circle.x(100);
+    circle.y(100);
+
+    var newURL = circle.toDataURL();
+    assert.equal(oldURL, newURL);
+  });
+
+  // ======================================================
+  test('toDataURL of transformer shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var text = new Konva.Text({
+      fill: 'green',
+      text: 'hello, test',
+      rotation: 45
+    });
+    layer.add(text);
+
+    var oldURL = text.toDataURL();
+
+    text.x(100);
+    text.y(100);
+
+    var newURL = text.toDataURL();
+    assert.equal(oldURL, newURL);
+  });
+
   // ======================================================
   test("listen and don't listen", function() {
     var stage = addStage();

test/unit/Stage-test.js

@@ -1057,7 +1057,8 @@ suite('Stage', function() {
     });
     layer.add(circle);
     stage.add(layer);
-    assert.equal(stage.toDataURL(), layer.toDataURL());
+
+    compareCanvases(stage.toCanvas(), layer.toCanvas());
   });
 
   test('toDataURL with hidden layer', function() {