added shadow support. changed fillStroke method to shadowFillStroke

src/Node.js

@@ -643,9 +643,10 @@ Kinetic.Node.prototype = {
      * @param {Number} x
      * @param {Number} y
      */
-    setCenterOffset: function(x, y) {
-        this.attrs.centerOffset.x = x;
-        this.attrs.centerOffset.y = y;
+    setCenterOffset: function() {
+    	var pos = Kinetic.GlobalObject._getPoint(arguments);
+        this.attrs.centerOffset.x = pos.x;
+        this.attrs.centerOffset.y = pos.y;
     },
     /**
      * get center offset

src/Shape.js

@@ -21,7 +21,13 @@ Kinetic.Shape = function(config) {
         stroke: undefined,
         strokeWidth: undefined,
         lineJoin: undefined,
-        detectionType: 'path'
+        detectionType: 'path',
+        shadowColor: undefined,
+        shadowBlur: undefined,
+        shadowOffset: {
+            x: 0,
+            y: 0
+        }
     });
 
     this.data = [];
@@ -65,11 +71,23 @@ Kinetic.Shape.prototype = {
             context.stroke();
         }
     },
+    /**
+     * convenience method that both fills and strokes
+     * the shape
+     */
+    shadowFillStroke: function() {
+        var context = this.getContext();
+        context.save();
+        this.applyShadow();
+        this.fill();
+        context.restore();
+        this.stroke();
+    },
     /**
      * helper method to fill and stroke a shape
      *  based on its fill, stroke, and strokeWidth, properties
      */
-    fillStroke: function() {
+    fill: function() {
         var context = this.getContext();
         var fill = this.attrs.fill;
         /*
@@ -109,8 +127,6 @@ Kinetic.Shape.prototype = {
             context.fillStyle = f;
             context.fill();
         }
-
-        this.stroke();
     },
     /**
      * helper method to set the line join of a shape
@@ -122,6 +138,18 @@ Kinetic.Shape.prototype = {
             context.lineJoin = this.attrs.lineJoin;
         }
     },
+    /**
+     * apply shadow helper method
+     */
+    applyShadow: function() {
+        var context = this.getContext();
+        if(this.attrs.shadowColor !== undefined) {
+            context.shadowColor = this.attrs.shadowColor;
+            context.shadowBlur = this.attrs.shadowBlur;
+            context.shadowOffsetX = this.attrs.shadowOffset.x;
+            context.shadowOffsetY = this.attrs.shadowOffset.y;
+        }
+    },
     /**
      * set fill which can be a color, gradient object,
      *  or pattern object
@@ -176,6 +204,45 @@ Kinetic.Shape.prototype = {
     getStrokeWidth: function() {
         return this.attrs.strokeWidth;
     },
+    /**
+     * set shadow color
+     * @param {String} color
+     */
+    setShadowColor: function(color) {
+        this.attrs.shadowColor = color;
+    },
+    /**
+     * get shadow color
+     */
+    getShadowColor: function() {
+        return this.attrs.shadowColor;
+    },
+    /**
+     * set shadow blur
+     * @param {Integer}
+     */
+    setShadowBlur: function(blur) {
+        this.attrs.shadowBlur = blur;
+    },
+    /**
+     * get shadow blur
+     */
+    getShadowblur: function() {
+        return this.attrs.shadowBlur;
+    },
+    /**
+     * set shadow offset
+     * @param {Object} offset
+     */
+    setShadowOffset: function(offset) {
+        this.attrs.shadowOffset = offset;
+    },
+    /**
+     * get shadow offset
+     */
+    getShadowOffset: function() {
+        return this.attrs.shadowOffset;
+    },
     /**
      * set draw function
      * @param {Function} func drawing function

src/shapes/Circle.js

@@ -21,7 +21,7 @@ Kinetic.Circle = function(config) {
         this.applyLineJoin();
         context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/Image.js

@@ -33,7 +33,7 @@ Kinetic.Image = function(config) {
             this.applyLineJoin();
             context.rect(0, 0, width, height);
             context.closePath();
-            this.fillStroke();
+            this.shadowFillStroke();
 
             // if cropping
             if(cropWidth !== undefined && cropHeight !== undefined) {

src/shapes/Line.js

@@ -41,6 +41,7 @@ Kinetic.Line = function(config) {
         if(!!this.attrs.lineCap) {
             context.lineCap = this.attrs.lineCap;
         }
+        this.applyShadow();
         this.stroke();
     };
     // call super constructor

src/shapes/Polygon.js

@@ -22,7 +22,7 @@ Kinetic.Polygon = function(config) {
             context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
         }
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/Rect.js

@@ -37,7 +37,7 @@ Kinetic.Rect = function(config) {
             context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
         }
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/RegularPolygon.js

@@ -26,7 +26,7 @@ Kinetic.RegularPolygon = function(config) {
             context.lineTo(x, y);
         }
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/Star.js

@@ -19,6 +19,7 @@ Kinetic.Star = function(config) {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
+        
         context.moveTo(0, 0 - this.attrs.outerRadius);
 
         for(var n = 1; n < this.attrs.numPoints * 2; n++) {
@@ -28,7 +29,7 @@ Kinetic.Star = function(config) {
             context.lineTo(x, y);
         }
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/Text.js

@@ -57,7 +57,7 @@ Kinetic.Text = function(config) {
         this.applyLineJoin();
         context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
         context.closePath();
-        this.fillStroke();
+        this.shadowFillStroke();
         context.restore();
 
         var tx = p + x;