improved shadow logic such that it first attempts to apply shadows to a shape's fill if it's defined, otherwise it will attempt to apply the shadow to the stroke

dist/kinetic-core.js

@@ -356,12 +356,15 @@ Kinetic.Node.prototype = {
                         case 'centerOffset':
                             this._setPointAttr(key, val);
                             break;
+                        case 'shadowOffset':
+                            this._setPointAttr(key, val);
+                            break;
                         case 'scale':
                             this._setPointAttr(key, val);
                             break;
                         case 'points':
                             /*
-                             * if points contains an array of object, just set
+                             * if points contains an array of objects, just set
                              * the attr normally
                              */
                             if(Kinetic.GlobalObject._isObject(val[0])) {
@@ -2493,11 +2496,25 @@ Kinetic.Shape.prototype = {
      */
     shadowFillStroke: function() {
         var context = this.getContext();
-        context.save();
+        /*
-        this.applyShadow();
+         * if fill is defined, apply shadow to
-        this.fill();
+         * fill only and not the stroke
-        context.restore();
+         */
-        this.stroke();
+        if(!!this.attrs.fill) {
+            context.save();
+            this.applyShadow();
+            this.fill();
+            context.restore();
+            this.stroke();
+        }
+        /*
+         * if fill is not defined, try applying the shadow
+         * to the stroke
+         */
+        else {
+            this.applyShadow();
+            this.stroke();
+        }
     },
     /**
      * helper method to fill and stroke a shape
@@ -2506,10 +2523,6 @@ Kinetic.Shape.prototype = {
     fill: function() {
         var context = this.getContext();
         var fill = this.attrs.fill;
-        /*
-         * expect that fill, stroke, and strokeWidth could be
-         * undfined, '', null, or 0.  Use !!
-         */
         if(!!fill) {
             // color fill
             if( typeof fill == 'string') {

src/Node.js

@@ -172,12 +172,15 @@ Kinetic.Node.prototype = {
                         case 'centerOffset':
                             this._setPointAttr(key, val);
                             break;
+                        case 'shadowOffset':
+                            this._setPointAttr(key, val);
+                            break;
                         case 'scale':
                             this._setPointAttr(key, val);
                             break;
                         case 'points':
                             /*
-                             * if points contains an array of object, just set
+                             * if points contains an array of objects, just set
                              * the attr normally
                              */
                             if(Kinetic.GlobalObject._isObject(val[0])) {

src/Shape.js

@@ -77,11 +77,25 @@ Kinetic.Shape.prototype = {
      */
     shadowFillStroke: function() {
         var context = this.getContext();
-        context.save();
+        /*
-        this.applyShadow();
+         * if fill is defined, apply shadow to
-        this.fill();
+         * fill only and not the stroke
-        context.restore();
+         */
-        this.stroke();
+        if(!!this.attrs.fill) {
+            context.save();
+            this.applyShadow();
+            this.fill();
+            context.restore();
+            this.stroke();
+        }
+        /*
+         * if fill is not defined, try applying the shadow
+         * to the stroke
+         */
+        else {
+            this.applyShadow();
+            this.stroke();
+        }
     },
     /**
      * helper method to fill and stroke a shape
@@ -90,10 +104,6 @@ Kinetic.Shape.prototype = {
     fill: function() {
         var context = this.getContext();
         var fill = this.attrs.fill;
-        /*
-         * expect that fill, stroke, and strokeWidth could be
-         * undfined, '', null, or 0.  Use !!
-         */
         if(!!fill) {
             // color fill
             if( typeof fill == 'string') {

tests/js/unitTests.js

@@ -1268,7 +1268,10 @@ Test.prototype.tests = {
             lineCap: 'round',
             lineJoin: 'round',
             draggable: true,
-            dashArray: [30, 10, 0, 10, 10, 20]
+            dashArray: [30, 10, 0, 10, 10, 20],
+            shadowColor: '#aaa',
+            shadowBlur: 10,
+            shadowOffset: [20, 20],
         });
 
         layer.add(line);
@@ -1423,10 +1426,7 @@ Test.prototype.tests = {
             lineJoin: "round",
             shadowColor: '#aaa',
             shadowBlur: 10,
-            shadowOffset: {
+            shadowOffset: [20, 20],
-                x: 20,
-                y: 20
-            },
             draggable: true
         });