new applyShadow method for shape. Images with transparent pixels can now have shadows applied to them again. Fixed image stroke buffer rendering issue

src/Shape.js

@@ -142,16 +142,32 @@
          *  will only be applied to either the fill or stroke.  Fill
          *  is given priority over stroke.
          * @name fillStroke
+         * @param {CanvasContext} context
          * @methodOf Kinetic.Shape.prototype
          */
         fillStroke: function(context) {
             context.renderer._fill(this);
             context.renderer._stroke(this, this.getShadow() && this.getFill());
         },
+        /**
+         * apply shadow
+         * @name applyShadow
+         * @param {CanvasContext} context
+         * @param {Function} func draw function
+         * @methodOf Kinetic.Shape.prototype
+         */
+        applyShadow: function(context, func) {
+            context.save();
+            context.renderer._applyShadow(this);
+            func();
+            context.restore();
+            func();
+        },
         /**
          * draw an image
          * @name drawImage
          * @methodOf Kinetic.Shape.prototype
+         * @param {CanvasContext} context
          */
         drawImage: function() {
             var context = arguments[0];

src/shapes/Image.js

@@ -31,7 +31,7 @@ Kinetic.Image.prototype = {
         this._syncSize();
     },
     drawFunc: function(context) {
-        var width = this.getWidth(), height = this.getHeight();
+        var width = this.getWidth(), height = this.getHeight(), params, that = this;
 
         context.beginPath();
         context.rect(0, 0, width, height);
@@ -45,13 +45,24 @@ Kinetic.Image.prototype = {
                 var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
                 var cropWidth = this.attrs.crop.width;
                 var cropHeight = this.attrs.crop.height;
-                this.drawImage(context, this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
+                params = [context, this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
             }
             // no cropping
             else {
-                this.drawImage(context, this.attrs.image, 0, 0, width, height);
+                params = [context, this.attrs.image, 0, 0, width, height];
             }
+
+            if(this.getShadow()) {
+                this.applyShadow(context, function() {
+                    that.drawImage.apply(that, params);
+                });
             }
+            else {
+                this.drawImage.apply(this, params);
+            }
+
+        }
+
     },
     drawHitFunc: function(context) {
         var width = this.getWidth(), height = this.getHeight(), imageBuffer = this.imageBuffer, appliedShadow = false;

src/util/Canvas.js

@@ -221,11 +221,11 @@ Kinetic.HitRenderer.prototype = {
         context.restore();
     },
     _stroke: function(shape) {
-        var context = this.context, stroke = '#' + shape.colorKey, strokeWidth = shape.getStrokeWidth();
+        var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth();
         if(stroke || strokeWidth) {
             context.save();
             context.lineWidth = strokeWidth || 2;
-            context.strokeStyle = stroke || 'black';
+            context.strokeStyle = '#' + shape.colorKey;
             context.stroke(context);
             context.restore();
         }

tests/js/unit/shapes/imageTests.js

@@ -7,9 +7,7 @@ Test.Modules.IMAGE = {
                 width: 578,
                 height: 200
             });
-            var layer = new Kinetic.Layer({
+            var layer = new Kinetic.Layer();
-                throttle: 999
-            });
             darth = new Kinetic.Image({
                 x: 200,
                 y: 60,
@@ -123,6 +121,39 @@ Test.Modules.IMAGE = {
         };
         imageObj.src = '../assets/darth-vader.jpg';
     },
+    'create image buffer': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            var lion = new Kinetic.Image({
+                x: 200,
+                y: 40,
+                image: imageObj,
+                draggable: true,
+                shadow: {
+                    color: 'black',
+                    blur: 10,
+                    offset: [20, 20],
+                    opacity: 0.2
+                }
+            });
+
+            layer.add(lion);
+
+            lion.createImageBuffer(function() {
+                stage.add(layer);
+                layer.drawHit();
+            });
+            showHit(layer);
+
+        };
+        imageObj.src = '../assets/lion.png';
+    },
     'grayscale image': function(containerId) {
         var imageObj = new Image();
         imageObj.onload = function() {
@@ -345,10 +376,12 @@ Test.Modules.IMAGE = {
             });
 
             layer.add(lion);
-            lion.createImageBuffer(function() {
             stage.add(layer);
-            });
+            showHit(layer);
-            //document.body.appendChild(layer.bufferCanvas.element);
+
+            //var dataUrl = layer.toDataURL();
+
+            //warn(dataUrl === dataUrls['transparent image shadow'], 'problem applying shadow to image with transparent pixels');
 
         };
         imageObj.src = '../assets/lion.png';