performance improvement

src/Context.js

@@ -546,19 +546,13 @@
         },
         _applyShadow: function(shape) {
             var util = Konva.Util,
-                absOpacity = shape.getAbsoluteOpacity(),
+                color = util.get(shape.getShadowRGBA(), 'black'),
-                color = util.get(shape.getShadowColor(), 'black'),
                 blur = util.get(shape.getShadowBlur(), 5),
-                shadowOpacity = util.get(shape.getShadowOpacity(), 1),
                 offset = util.get(shape.getShadowOffset(), {
                     x: 0,
                     y: 0
                 });
 
-            if(shadowOpacity) {
-                this.setAttr('globalAlpha', shadowOpacity * absOpacity);
-            }
-
             this.setAttr('shadowColor', color);
             this.setAttr('shadowBlur', blur);
             this.setAttr('shadowOffsetX', offset.x);

src/Shape.js

@@ -1,5 +1,6 @@
 (function() {
     var HAS_SHADOW = 'hasShadow';
+    var SHADOW_RGBA = 'shadowRGBA';
 
     function _fillFunc(context) {
         context.fill();
@@ -18,6 +19,10 @@
         this._clearCache(HAS_SHADOW);
     }
 
+    function _clearGetShadowRGBACache() {
+        this._clearCache(SHADOW_RGBA);
+    }
+
     Konva.Util.addMethods(Konva.Shape, {
         __init: function(config) {
             this.nodeType = 'Shape';
@@ -44,6 +49,8 @@
             Konva.Node.call(this, config);
 
             this.on('shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearHasShadowCache);
+
+            this.on('shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearGetShadowRGBACache);
         },
         hasChildren: function() {
             return false;
@@ -81,6 +88,15 @@
         _hasShadow: function() {
             return this.getShadowEnabled() && (this.getShadowOpacity() !== 0 && !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffsetX() || this.getShadowOffsetY()));
         },
+        getShadowRGBA: function() {
+            return this._getCache(SHADOW_RGBA, this._getShadowRGBA);
+        },
+        _getShadowRGBA: function() {
+            if (this.hasShadow()) {
+                var rgba = Konva.Util.colorToRGBA(this.shadowColor());
+                return 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + (rgba.a * (this.getShadowOpacity() || 1)) + ')';
+            }
+        },
         /**
          * returns whether or not the shape will be filled
          * @method
@@ -138,6 +154,7 @@
                 cachedCanvas = this._cache.canvas,
                 drawFunc = this.sceneFunc(),
                 hasShadow = this.hasShadow(),
+                hasStroke = this.hasStroke(),
                 stage, bufferCanvas, bufferContext;
 
             if(this.isVisible()) {
@@ -200,26 +217,29 @@
                             context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
                         }
 
-                        if (hasShadow && !canvas.hitCanvas) {
+                        if (hasShadow && hasStroke && !canvas.hitCanvas) {
                             context.save();
+                            // apply shadow
+                            context._applyOpacity(this);
                             context._applyShadow(this);
                             drawFunc.call(this, context);
                             context.restore();
+                            // if shape has stroke we need to redraw shape
+                            // otherwise we will see shadow under stroke (and over fill)
+                            // but I think is is unexpected behavior
+                            if (this.hasFill()) {
+                                drawFunc.call(this, context);
+                            }
+                        } else if (hasShadow && !canvas.hitCanvas) {
+                            context.save();
+                            context._applyOpacity(this);
+                            context._applyShadow(this);
+                            drawFunc.call(this, context);
+                            context.restore();
+                        } else {
+                            context._applyOpacity(this);
+                            drawFunc.call(this, context);
                         }
-
-                        context._applyOpacity(this);
-                        drawFunc.call(this, context);
-
-//                        // clear stroke shadow
-//                        if (hasShadow && !canvas.hitCanvas) {
-//                            context.setAttr('shadowBlur', 0);
-//                            context.setAttr('shadowColor', 0);
-//                            context.setAttr('shadowOffsetX', 0);
-//                            context.setAttr('shadowOffsetY', 0);
-//                            context.stroke();
-//                        }
-
-
                     }
                     context.restore();
                 }

src/Util.js

@@ -305,26 +305,155 @@
         KONVA_ERROR = 'Konva error: ',
         RGB_PAREN = 'rgb(',
         COLORS = {
-            aqua: [0,255,255],
+            aliceblue: [240, 248, 255],
-            lime: [0,255,0],
+            antiquewhite: [250, 235, 215],
-            silver: [192,192,192],
+            aqua: [0, 255, 255],
-            black: [0,0,0],
+            aquamarine: [127, 255, 212],
-            maroon: [128,0,0],
+            azure: [240, 255, 255],
-            teal: [0,128,128],
+            beige: [245, 245, 220],
-            blue: [0,0,255],
+            bisque: [255, 228, 196],
-            navy: [0,0,128],
+            black: [0, 0, 0],
-            white: [255,255,255],
+            blanchedalmond: [255, 235, 205],
-            fuchsia: [255,0,255],
+            blue: [0, 0, 255],
-            olive:[128,128,0],
+            blueviolet: [138, 43, 226],
-            yellow: [255,255,0],
+            brown: [165, 42, 42],
-            orange: [255,165,0],
+            burlywood: [222, 184, 135],
-            gray: [128,128,128],
+            cadetblue: [95, 158, 160],
-            purple: [128,0,128],
+            chartreuse: [127, 255, 0],
-            green: [0,128,0],
+            chocolate: [210, 105, 30],
-            red: [255,0,0],
+            coral: [255, 127, 80],
-            pink: [255,192,203],
+            cornflowerblue: [100, 149, 237],
-            cyan: [0,255,255],
+            cornsilk: [255, 248, 220],
-            transparent: [255,255,255,0]
+            crimson: [220, 20, 60],
+            cyan: [0, 255, 255],
+            darkblue: [0, 0, 139],
+            darkcyan: [0, 139, 139],
+            darkgoldenrod: [184, 132, 11],
+            darkgray: [169, 169, 169],
+            darkgreen: [0, 100, 0],
+            darkgrey: [169, 169, 169],
+            darkkhaki: [189, 183, 107],
+            darkmagenta: [139, 0, 139],
+            darkolivegreen: [85, 107, 47],
+            darkorange: [255, 140, 0],
+            darkorchid: [153, 50, 204],
+            darkred: [139, 0, 0],
+            darksalmon: [233, 150, 122],
+            darkseagreen: [143, 188, 143],
+            darkslateblue: [72, 61, 139],
+            darkslategray: [47, 79, 79],
+            darkslategrey: [47, 79, 79],
+            darkturquoise: [0, 206, 209],
+            darkviolet: [148, 0, 211],
+            deeppink: [255, 20, 147],
+            deepskyblue: [0, 191, 255],
+            dimgray: [105, 105, 105],
+            dimgrey: [105, 105, 105],
+            dodgerblue: [30, 144, 255],
+            firebrick: [178, 34, 34],
+            floralwhite: [255, 255, 240],
+            forestgreen: [34, 139, 34],
+            fuchsia: [255, 0, 255],
+            gainsboro: [220, 220, 220],
+            ghostwhite: [248, 248, 255],
+            gold: [255, 215, 0],
+            goldenrod: [218, 165, 32],
+            gray: [128, 128, 128],
+            green: [0, 128, 0],
+            greenyellow: [173, 255, 47],
+            grey: [128, 128, 128],
+            honeydew: [240, 255, 240],
+            hotpink: [255, 105, 180],
+            indianred: [205, 92, 92],
+            indigo: [75, 0, 130],
+            ivory: [255, 255, 240],
+            khaki: [240, 230, 140],
+            lavender: [230, 230, 250],
+            lavenderblush: [255, 240, 245],
+            lawngreen: [124, 252, 0],
+            lemonchiffon: [255, 250, 205],
+            lightblue: [173, 216, 230],
+            lightcoral: [240, 128, 128],
+            lightcyan: [224, 255, 255],
+            lightgoldenrodyellow: [250, 250, 210],
+            lightgray: [211, 211, 211],
+            lightgreen: [144, 238, 144],
+            lightgrey: [211, 211, 211],
+            lightpink: [255, 182, 193],
+            lightsalmon: [255, 160, 122],
+            lightseagreen: [32, 178, 170],
+            lightskyblue: [135, 206, 250],
+            lightslategray: [119, 136, 153],
+            lightslategrey: [119, 136, 153],
+            lightsteelblue: [176, 196, 222],
+            lightyellow: [255, 255, 224],
+            lime: [0, 255, 0],
+            limegreen: [50, 205, 50],
+            linen: [250, 240, 230],
+            magenta: [255, 0, 255],
+            maroon: [128, 0, 0],
+            mediumaquamarine: [102, 205, 170],
+            mediumblue: [0, 0, 205],
+            mediumorchid: [186, 85, 211],
+            mediumpurple: [147, 112, 219],
+            mediumseagreen: [60, 179, 113],
+            mediumslateblue: [123, 104, 238],
+            mediumspringgreen: [0, 250, 154],
+            mediumturquoise: [72, 209, 204],
+            mediumvioletred: [199, 21, 133],
+            midnightblue: [25, 25, 112],
+            mintcream: [245, 255, 250],
+            mistyrose: [255, 228, 225],
+            moccasin: [255, 228, 181],
+            navajowhite: [255, 222, 173],
+            navy: [0, 0, 128],
+            oldlace: [253, 245, 230],
+            olive: [128, 128, 0],
+            olivedrab: [107, 142, 35],
+            orange: [255, 165, 0],
+            orangered: [255, 69, 0],
+            orchid: [218, 112, 214],
+            palegoldenrod: [238, 232, 170],
+            palegreen: [152, 251, 152],
+            paleturquoise: [175, 238, 238],
+            palevioletred: [219, 112, 147],
+            papayawhip: [255, 239, 213],
+            peachpuff: [255, 218, 185],
+            peru: [205, 133, 63],
+            pink: [255, 192, 203],
+            plum: [221, 160, 203],
+            powderblue: [176, 224, 230],
+            purple: [128, 0, 128],
+            rebeccapurple: [102, 51, 153],
+            red: [255, 0, 0],
+            rosybrown: [188, 143, 143],
+            royalblue: [65, 105, 225],
+            saddlebrown: [139, 69, 19],
+            salmon: [250, 128, 114],
+            sandybrown: [244, 164, 96],
+            seagreen: [46, 139, 87],
+            seashell: [255, 245, 238],
+            sienna: [160, 82, 45],
+            silver: [192, 192, 192],
+            skyblue: [135, 206, 235],
+            slateblue: [106, 90, 205],
+            slategray: [119, 128, 144],
+            slategrey: [119, 128, 144],
+            snow: [255, 255, 250],
+            springgreen: [0, 255, 127],
+            steelblue: [70, 130, 180],
+            tan: [210, 180, 140],
+            teal: [0, 128, 128],
+            thistle: [216, 191, 216],
+            transparent: [255,255,255,0],
+            tomato: [255, 99, 71],
+            turquoise: [64, 224, 208],
+            violet: [238, 130, 238],
+            wheat: [245, 222, 179],
+            white: [255, 255, 255],
+            whitesmoke: [245, 245, 245],
+            yellow: [255, 255, 0],
+            yellowgreen: [154, 205, 5]
         },
 
         RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
@@ -582,6 +711,78 @@
                 };
             }
         },
+        // convert any color string to RGBA object
+        // from https://github.com/component/color-parser
+        colorToRGBA : function(str) {
+            str = str || 'black';
+            return Konva.Util._namedColorToRBA(str)
+                || Konva.Util._hex3ColorToRGBA(str)
+                || Konva.Util._hex6ColorToRGBA(str)
+                || Konva.Util._rgbColorToRGBA(str)
+                || Konva.Util._rgbaColorToRGBA(str);
+        },
+        // Parse named css color. Like "green"
+        _namedColorToRBA : function(str) {
+            var c = COLORS[str.toLowerCase()];
+            if (!c) {
+                return;
+            }
+            return {
+                r: c[0],
+                g: c[1],
+                b: c[2],
+                a: 1
+            };
+        },
+        // Parse rgb(n, n, n)
+        _rgbColorToRGBA : function(str) {
+            if (str.indexOf('rgb(') === 0) {
+                str = str.match(/rgb\(([^)]+)\)/)[1];
+                var parts = str.split(/ *, */).map(Number);
+                return {
+                    r: parts[0],
+                    g: parts[1],
+                    b: parts[2],
+                    a: 1
+                };
+            }
+        },
+        // Parse rgba(n, n, n, n)
+        _rgbaColorToRGBA : function(str) {
+            if (str.indexOf('rgba(') === 0) {
+                str = str.match(/rgba\(([^)]+)\)/)[1];
+                var parts = str.split(/ *, */).map(Number);
+                return {
+                    r: parts[0],
+                    g: parts[1],
+                    b: parts[2],
+                    a: parts[3]
+                };
+            }
+
+        },
+        // Parse #nnnnnn
+        _hex6ColorToRGBA : function(str) {
+            if ((str[0] === '#') && (str.length === 7)) {
+                return {
+                    r: parseInt(str.slice(1, 3), 16),
+                    g: parseInt(str.slice(3, 5), 16),
+                    b: parseInt(str.slice(5, 7), 16),
+                    a: 1
+                };
+            }
+        },
+        // Parse #nnn
+        _hex3ColorToRGBA : function(str) {
+            if ((str[0] === '#') && (str.length === 4)) {
+                return {
+                    r: parseInt(str[1] + str[1], 16),
+                    g: parseInt(str[2] + str[2], 16),
+                    b: parseInt(str[3] + str[3], 16),
+                    a: 1
+                };
+            }
+        },
         // o1 takes precedence over o2
         _merge: function(o1, o2) {
             var retObj = this._clone(o2);

src/shapes/Image.js

@@ -57,7 +57,7 @@
                 }
             }
 
-            if (this.hasFill() || this.hasStroke() || this.hasShadow()) {
+            if (this.hasFill() || this.hasStroke()) {
                 context.beginPath();
                 context.rect(0, 0, width, height);
                 context.closePath();

src/shapes/Text.js

@@ -101,6 +101,7 @@
                 n;
 
             context.setAttr('font', this._getContextFont());
+
             context.setAttr('textBaseline', MIDDLE);
             context.setAttr('textAlign', LEFT);
             context.save();
@@ -128,6 +129,7 @@
                 }
 
                 this.partialText = text;
+
                 context.fillStrokeShape(this);
                 context.restore();
                 context.translate(0, lineHeightPx);

test/runner.js

@@ -5,6 +5,7 @@ var assert = chai.assert,
     origAssertEqual = assert.equal,
     origAssert = assert,
     origNotEqual = assert.notEqual,
+    origDeepEqual = assert.deepEqual,
     assertionCount = 0,
     assertions = document.createElement('em');
 
@@ -34,6 +35,11 @@ function init() {
     assertions.innerHTML = ++assertionCount;
   };
 
+    assert.deepEqual = function() {
+        origDeepEqual.apply(this, arguments);
+        assertions.innerHTML = ++assertionCount;
+    };
+
   window.onload = function() {
     var mochaStats = document.getElementById('mocha-stats');
 

test/unit/Shape-test.js

@@ -375,33 +375,49 @@ suite('Shape', function() {
 
   // ======================================================
   test('fill with shadow and opacity', function(){
-    var stage = addStage();
+        var stage = addStage();
 
-    var layer = new Konva.Layer();
+        var layer = new Konva.Layer();
 
-    var rect = new Konva.Rect({
+        var rect = new Konva.Rect({
-      x: 100,
+          x: 100,
-      y: 50,
+          y: 50,
-      width: 100,
+          width: 100,
-      height: 50,
+          height: 50,
-      fill: 'green',
+          fill: 'green',
-      opacity: 0.5,
+          opacity: 0.5,
-      shadowColor: 'black',
+          shadowColor: 'black',
-      shadowBlur: 10,
+          shadowBlur: 10,
-      shadowOffset: {x:10, y:10},
+          shadowOffset: {x:10, y:10},
-      shadowOpacity: 0.5
+          shadowOpacity: 0.5
-    });
+        });
 
-    layer.add(rect);
+        layer.add(rect);
-    stage.add(layer);
+        stage.add(layer);
 
-    assert.equal(rect.getX(), 100);
+        assert.equal(rect.getX(), 100);
-    assert.equal(rect.getY(), 50);
+        assert.equal(rect.getY(), 50);
+
+      var canvas = createCanvas();
+      var context = canvas.getContext('2d');
+      context.globalAlpha = 0.5;
+      // rect
+      context.beginPath();
+      context.rect(100, 50, 100, 50);
+      context.closePath();
+
+      context.fillStyle = 'green';
+      context.shadowColor = 'rgba(0,0,0,0.5)';
+      context.shadowBlur = 10;
+      context.shadowOffsetX = 10;
+      context.shadowOffsetY = 10;
+      context.fill();
+
+      compareLayerAndCanvas(layer, canvas, 10);
 
     var trace = layer.getContext().getTrace();
-    //console.log(trace);
 
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();');
 
   });
 
@@ -431,9 +447,29 @@ suite('Shape', function() {
     assert.equal(rect.getX(), 100);
     assert.equal(rect.getY(), 50);
 
+      var canvas = createCanvas();
+      var context = canvas.getContext('2d');
+      context.globalAlpha = 0.5;
+      // rect
+      context.beginPath();
+      context.rect(100, 50, 100, 50);
+      context.closePath();
+
+      context.strokeStyle = 'red';
+      context.lineWidth = 20;
+
+
+      context.shadowColor = 'rgba(0,0,0,0.5)';
+      context.shadowBlur = 10;
+      context.shadowOffsetX = 10;
+      context.shadowOffsetY = 10;
+      context.stroke();
+
+      compareLayerAndCanvas(layer, canvas, 10);
+
     var trace = layer.getContext().getTrace();
     //console.log(trace);
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();');
   });
 
 
@@ -533,15 +569,8 @@ suite('Shape', function() {
     });
 
     // ======================================================
-    test.skip('fill and stroke with shadow and opacity', function(){
+    test('fill and stroke with shadow and opacity', function(){
         var stage = addStage();
-//        stage.bufferCanvas2._canvas.style.position = 'relative';
-
-//        document.body.appendChild(stage.bufferCanvas2._canvas);
-
-        stage.bufferCanvas._canvas.style.position = 'relative';
-
-        document.body.appendChild(stage.bufferCanvas._canvas);
         var layer = new Konva.Layer();
 
         var rect = new Konva.Rect({
@@ -553,8 +582,8 @@ suite('Shape', function() {
             stroke: 'black',
             strokeWidth: 10,
             shadowColor: 'grey',
-            shadowBlur: 10,
             opacity : 0.5,
+            shadowBlur : 1,
             shadowOffset: {
                 x: 20,
                 y: 20
@@ -565,24 +594,21 @@ suite('Shape', function() {
         layer.add(rect);
         stage.add(layer);
 
-
-
-        var trace = layer.getContext().getTrace();
-        console.log(trace);
-
         var canvas = createCanvas();
         var context = canvas.getContext('2d');
-        context.globalAlpha = 0.60;
+        context.globalAlpha = 0.5;
 
         // draw shadow
+        var offset = 200;
         context.save();
         context.beginPath();
-        context.rect(95, 45, 110, 60);
+        context.rect(95 - offset, 45 - offset, 110, 60);
         context.closePath();
         context.shadowColor = 'grey';
-        context.shadowBlur = 10;
+        context.shadowBlur = 1;
-        context.shadowOffsetX = 20;
+        context.shadowOffsetX = 20 + offset;
-        context.shadowOffsetY = 20;
+        context.shadowOffsetY = 20 + offset;
+        context.fillStyle = 'black';
         context.fill();
         context.restore();
 
@@ -597,14 +623,88 @@ suite('Shape', function() {
         context.lineWidth = 10;
         context.strokeStyle = 'black';
         context.stroke();
-        context.fillStyle = 'green';
-        context.fillRect(105, 55, 90, 40);
         context.restore();
-//        context.stroke();
+
-//        console.log(layer.getContext().getTrace());
+        context.save();
-        compareLayerAndCanvas(layer, canvas, 10);
+        context.beginPath();
+        context.fillStyle = 'green';
+        context.rect(105, 55, 90, 40);
+        context.closePath();
+        context.fill();
+        context.restore();
+
+
+        compareLayerAndCanvas(layer, canvas, 50);
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(128,128,128,1);shadowBlur=1;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
+
     });
 
+    // ======================================================
+    test('text with fill and stroke with shadow', function(){
+        var stage = addStage();
+
+        var layer = new Konva.Layer();
+
+        var text = new Konva.Text({
+            x: 50,
+            y: 50,
+            text : 'Test TEXT',
+            fontSize :  50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 2,
+            shadowColor: 'grey',
+            shadowBlur: 2,
+            shadowOffset: {
+                x: 20,
+                y: 20
+            }
+        });
+
+        layer.add(text);
+        stage.add(layer);
+
+        var canvas = createCanvas();
+        var context = canvas.getContext('2d');
+
+        context.save();
+        context.shadowColor = 'grey';
+        context.shadowBlur = 2;
+        context.shadowOffsetX = 20;
+        context.shadowOffsetY = 20;
+        context.font = 'normal 50px Arial';
+        context.textBaseline = 'middle';
+
+        context.fillStyle = 'green';
+        context.fillText('Test TEXT', 50, 75);
+
+        context.lineWidth  = 2;
+        context.strokeStyle = 'black';
+        context.strokeText('Test TEXT', 50, 75);
+
+        context.stroke();
+        context.fill();
+        context.restore();
+
+        // draw text again to remove shadow under stroke
+        context.font = 'normal 50px Arial';
+        context.textBaseline = 'middle';
+        context.fillText('Test TEXT', 50, 75);
+        context.fillStyle = 'green';
+        context.fillText('Test TEXT', 50, 75);
+
+        context.lineWidth  = 2;
+        context.strokeStyle = 'black';
+        context.strokeText('Test TEXT', 50, 75);
+
+        compareLayerAndCanvas(layer, canvas, 50);
+    });
+
+
+
     // ======================================================
     test('shape intersect with shadow', function(){
         var stage = addStage();
@@ -858,4 +958,31 @@ suite('Shape', function() {
         var trace = layer.getHitCanvas().getContext().getTrace(true);
         assert.equal(trace, 'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();');
     });
+
+    test('cache shadow color rgba', function() {
+        var circle = new Konva.Circle({
+            fill : 'green',
+            radius : 50
+        });
+        // no shadow on start
+        assert.equal(circle.hasShadow(), false);
+        assert.equal(circle.getShadowRGBA(), undefined);
+
+        // set shadow
+        circle.shadowColor('black');
+        assert.equal(circle.hasShadow(), true);
+        assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,1)');
+
+        // set another shadow property
+        circle.shadowOpacity(0.2);
+        assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,0.2)');
+
+        circle.shadowColor('rgba(10,10,10,0.5)');
+        assert.equal(circle.getShadowRGBA(), 'rgba(10,10,10,0.1)');
+
+
+        // reset shadow
+        circle.shadowColor(null);
+        assert.equal(circle.getShadowRGBA(), undefined);
+    });
 });

test/unit/Util-test.js

@@ -15,6 +15,28 @@ suite('Util', function(){
       blue: 200,
       alpha: 0.5
     }), 'rgba(100,150,200,0.5)');
-
   });
+
+    test('test colorToRGBA', function(){
+        assert.deepEqual(Konva.Util.colorToRGBA('black'), {
+            r : 0,
+            g : 0,
+            b : 0,
+            a : 1
+        });
+
+        assert.deepEqual(Konva.Util.colorToRGBA('#ffcc00'), {
+            r : 255,
+            g : 204,
+            b : 0,
+            a : 1
+        });
+
+        assert.deepEqual(Konva.Util.colorToRGBA(), {
+            r : 0,
+            g : 0,
+            b : 0,
+            a : 1
+        });
+    });
 });

test/unit/plugins/Label-test.js

@@ -1,6 +1,6 @@
 suite('Label', function() {
     // ======================================================
-    test.skip('add label', function() {
+    test('add label', function() {
         var stage = addStage();
         var layer = new Konva.Layer();
 

test/unit/shapes/Image-test.js

@@ -248,7 +248,7 @@ suite('Image', function(){
           var stage = addStage();
 
           var layer = new Konva.Layer();
-          darth = new Konva.Image({
+          var darth = new Konva.Image({
               x: 200,
               y: 60,
               image: imageObj,
@@ -259,7 +259,7 @@ suite('Image', function(){
               opacity: 0.5,
               shadowColor: 'black',
               shadowBlur: 10,
-              shadowOpacity: 0.5,
+              shadowOpacity: 0.1,
               shadowOffset: {x: 20, y:20}
           });
 
@@ -268,7 +268,7 @@ suite('Image', function(){
 
           var trace = layer.getContext().getTrace();
           //console.log(trace);
-          assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();');
+          assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();');
 
           done();
 
@@ -277,13 +277,13 @@ suite('Image', function(){
   });
 
   // ======================================================
-  test.skip('image with stroke, opacity and shadow', function(done) {
+  test('image with stroke, opacity and shadow', function(done) {
       var imageObj = new Image();
       imageObj.onload = function() {
           var stage = addStage();
 
           var layer = new Konva.Layer();
-          darth = new Konva.Image({
+          var darth = new Konva.Image({
               x: 200,
               y: 60,
               image: imageObj,
@@ -305,7 +305,7 @@ suite('Image', function(){
 
           var trace = layer.getContext().getTrace();
           //console.log(trace);
-          assert.equal(trace, 'clearRect(0,0,578,200);save();save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLCanvasElement],0,0);restore();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
+          assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
 
           done();
 

test/unit/shapes/Line-test.js

@@ -132,10 +132,31 @@ suite('Line', function() {
         layer.add(line);
         stage.add(layer);
 
+        var canvas = createCanvas();
+        var context = canvas.getContext('2d');
+
+        context.save();
+        context.lineJoin = 'round';
+        context.lineCap = 'round';
+        context.lineWidth = 20;
+        context.strokeStyle = 'blue';
+
+        context.shadowColor = 'rgba(0,0,0,0.5)';
+        context.shadowBlur = 20;
+        context.shadowOffsetX = 10;
+        context.shadowOffsetY = 10;
+        context.moveTo(73, 160);
+        context.lineTo(340, 23);
+
+        context.stroke();
+        context.fill();
+        context.restore();
+
+        compareLayerAndCanvas(layer, canvas, 5);
 
         var trace = layer.getContext().getTrace();
-        //console.log(trace);
+
-        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();globalAlpha=0.5;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
+        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();');
 
     });