Fix for correct image/dataURL/canvas exports for Konva.Stage.

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.1.6
+
+* Fix for correct image/dataURL/canvas exports  for `Konva.Stage`.
+
 ## 7.1.5
 
 * Performance fixes for dragging many nodes with `Konva.Transformer`.

konva.js

@@ -6098,20 +6098,26 @@
       };
       Stage.prototype._toKonvaCanvas = function (config) {
           config = config || {};
-          var x = config.x || 0, y = config.y || 0, canvas = new SceneCanvas({
+          config.x = config.x || 0;
-              width: config.width || this.width(),
+          config.y = config.y || 0;
-              height: config.height || this.height(),
+          config.width = config.width || this.width();
+          config.height = config.height || this.height();
+          var canvas = new SceneCanvas({
+              width: config.width,
+              height: config.height,
               pixelRatio: config.pixelRatio || 1,
-          }), _context = canvas.getContext()._context, layers = this.children;
+          });
-          if (x || y) {
+          var _context = canvas.getContext()._context;
-              _context.translate(-1 * x, -1 * y);
+          var layers = this.children;
+          if (config.x || config.y) {
+              _context.translate(-1 * config.x, -1 * config.y);
           }
           layers.each(function (layer) {
               if (!layer.isVisible()) {
                   return;
               }
               var layerCanvas = layer._toKonvaCanvas(config);
-              _context.drawImage(layerCanvas._canvas, x, y, layerCanvas.getWidth() / layerCanvas.getPixelRatio(), layerCanvas.getHeight() / layerCanvas.getPixelRatio());
+              _context.drawImage(layerCanvas._canvas, config.x, config.y, layerCanvas.getWidth() / layerCanvas.getPixelRatio(), layerCanvas.getHeight() / layerCanvas.getPixelRatio());
           });
           return canvas;
       };

src/Stage.ts

@@ -278,18 +278,21 @@ export class Stage extends Container<Layer> {
   _toKonvaCanvas(config) {
     config = config || {};
 
-    var x = config.x || 0,
+    config.x = config.x || 0;
-      y = config.y || 0,
+    config.y = config.y || 0;
-      canvas = new SceneCanvas({
+    config.width = config.width || this.width();
-        width: config.width || this.width(),
+    config.height = config.height || this.height();
-        height: config.height || this.height(),
-        pixelRatio: config.pixelRatio || 1,
-      }),
-      _context = canvas.getContext()._context,
-      layers = this.children;
 
-    if (x || y) {
+    var canvas = new SceneCanvas({
-      _context.translate(-1 * x, -1 * y);
+      width: config.width,
+      height: config.height,
+      pixelRatio: config.pixelRatio || 1,
+    });
+    var _context = canvas.getContext()._context;
+    var layers = this.children;
+
+    if (config.x || config.y) {
+      _context.translate(-1 * config.x, -1 * config.y);
     }
 
     layers.each(function (layer) {
@@ -299,8 +302,8 @@ export class Stage extends Container<Layer> {
       var layerCanvas = layer._toKonvaCanvas(config);
       _context.drawImage(
         layerCanvas._canvas,
-        x,
+        config.x,
-        y,
+        config.y,
         layerCanvas.getWidth() / layerCanvas.getPixelRatio(),
         layerCanvas.getHeight() / layerCanvas.getPixelRatio()
       );

test/unit/Node-test.js

@@ -337,6 +337,56 @@ suite('Node', function () {
     });
   });
 
+  // ======================================================
+  test('toDataURL with moved layer', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      x: 50,
+      y: 50,
+    });
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      fill: 'green',
+      x: 50,
+      y: 50,
+      radius: 50,
+    });
+    layer.add(circle);
+
+    stage.draw();
+    var stageExport = stage.toCanvas({
+      pixelRatio: layer.getCanvas().getPixelRatio(),
+    });
+    compareLayerAndCanvas(layer, stageExport);
+  });
+
+  // ======================================================
+  test('toDataURL with moved layer and moved export', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer({});
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      fill: 'green',
+      x: 50,
+      y: 50,
+      radius: 50,
+    });
+    layer.add(circle);
+
+    stage.draw();
+    var stageExport = stage.toCanvas({
+      x: 50,
+      y: 50,
+      pixelRatio: layer.getCanvas().getPixelRatio(),
+    });
+    layer.x(-50);
+    layer.y(-50);
+    layer.draw();
+    compareLayerAndCanvas(layer, stageExport);
+  });
+
   // ======================================================
   test('toDataURL of moved shape', function () {
     var stage = addStage();