stage.toDataURL() in sync way

CHANGELOG.md

@@ -18,6 +18,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - `toDataURL` now handle pixelRatio. you can pass `config.pixelRatio` argument
 - Correct `clone()` for custom nodes
 - `FastLayer` now can have transforms
+- `stage.toDataURL()` method now works in synchronous way. So `callback` argument is not required.
 
 ### Added
 - new `Konva.Image.fromURL` method

src/Stage.js

@@ -209,11 +209,11 @@
             return this.content;
         },
         /**
-         * Creates a composite data URL and requires a callback because the composite is generated asynchronously.
+         * Creates a composite data URL
          * @method
          * @memberof Konva.Stage.prototype
          * @param {Object} config
-         * @param {Function} config.callback function executed when the composite has completed
+         * @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
          * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
          *  "image/png" is the default
          * @param {Number} [config.x] x position of canvas section
@@ -243,27 +243,20 @@
                 _context.translate(-1 * x, -1 * y);
             }
 
-            function drawLayer(n) {
-                var layer = layers[n],
-                    layerUrl = layer.toDataURL({
-                        pixelRatio: config.pixelRatio
-                    }),
-                    pixelRatio = canvas.pixelRatio,
-                    imageObj = new Konva.window.Image();
 
-                imageObj.onload = function() {
-                    _context.drawImage(imageObj, 0, 0, imageObj.width / pixelRatio, imageObj.height / pixelRatio);
+            layers.each(function(layer) {
+                var width = layer.getCanvas().getWidth();
+                var height = layer.getCanvas().getHeight();
+                var ratio = layer.getCanvas().getPixelRatio();
+                _context.drawImage(layer.getCanvas()._canvas, 0, 0, width / ratio, height / ratio);
+            });
+            var src = canvas.toDataURL(mimeType, quality);
 
-                    if(n < layers.length - 1) {
-                        drawLayer(n + 1);
-                    }
-                    else {
-                        config.callback(canvas.toDataURL(mimeType, quality));
-                    }
-                };
-                imageObj.src = layerUrl;
+            if (config.callback) {
+                config.callback(src);
             }
-            drawLayer(0);
+
+            return src;
         },
         /**
          * converts stage into an image.

test/unit/Stage-test.js

@@ -561,6 +561,20 @@ suite('Stage', function() {
         image.src = 'assets/lion.png';
     });
 
+    test('toDataURL in sync way', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+        var circle = new Konva.Circle({
+            x: stage.width() / 2,
+            y: stage.height() / 2,
+            fill: 'red',
+            radius: 50
+        });
+        layer.add(circle);
+        stage.add(layer);
+        assert.equal(stage.toDataURL(), layer.toDataURL());
+    });
+
     test('check hit graph with stage listeting property', function() {
       var stage = addStage();
       var layer = new Konva.Layer();

test/unit/plugins/Label-test.js

@@ -214,7 +214,7 @@ suite('Label', function() {
 
         stage.add(layer);
 
-        cloneAndCompareLayer(layer, 220);
+        cloneAndCompareLayer(layer, 254);
     });
 
 });

test/unit/shapes/Text-test.js

@@ -401,7 +401,7 @@ suite('Text', function(){
         var layer = new Konva.Layer();
 
         var text = new Konva.Text({
-            fontSize: 50,
+            fontSize: 100,
             y : 10,
             x : 10,
             fillLinearGradientStartPoint: { x : -50, y : -50},
@@ -413,11 +413,14 @@ suite('Text', function(){
         layer.add(text);
         stage.add(layer);
 
-        var data = layer.getContext().getImageData(79, 37, 1, 1).data;
-        assert.equal(data[0], 255);
-        assert.equal(data[1], 255);
-        assert.equal(data[2], 0);
-        assert.equal(data[3], 255);
+        stage.on('mousemove', function() {
+            console.log(stage.getPointerPosition());
+        });
+        var data = layer.getContext().getImageData(176, 66, 1, 1).data;
+        assert.equal(data[0], 255, 'full green');
+        assert.equal(data[1], 255, 'full red');
+        assert.equal(data[2], 0, 'no blue');
+        assert.equal(data[3], 255, '255 alpha - fully visible');
     });