new fillPriority attr which enables you to easily toggle between different fill types without having to null out fill attrs and reset other fill attrs

src/Canvas.js

@@ -262,7 +262,7 @@
             context.fill();
         },
         _fill: function(shape, skipShadow) {
-            var context = this.context, fill = shape.getFill(), fillPatternImage = shape.getFillPatternImage(), fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(), fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint();
+            var context = this.context, fill = shape.getFill(), fillPatternImage = shape.getFillPatternImage(), fillLinearGradientStartPoint = shape.getFillLinearGradientStartPoint(), fillRadialGradientStartPoint = shape.getFillRadialGradientStartPoint(), fillPriority = shape.getFillPriority();
 
             context.save();
 
@@ -270,7 +270,21 @@
                 this._applyShadow(shape);
             }
 
-            if(fill) {
+            // priority fills
+            if(fill && fillPriority === 'color') {
+                this._fillColor(shape);
+            }
+            else if(fillPatternImage && fillPriority === 'pattern') {
+                this._fillPattern(shape);
+            }
+            else if(fillLinearGradientStartPoint && fillPriority === 'linear-gradient') {
+                this._fillLinearGradient(shape);
+            }
+            else if(fillRadialGradientStartPoint && fillPriority === 'radial-gradient') {
+                this._fillRadialGradient(shape);
+            }
+            // now just try and fill with whatever is available
+            else if(fill) {
                 this._fillColor(shape);
             }
             else if(fillPatternImage) {

src/Shape.js

@@ -24,7 +24,8 @@
                 fillEnabled: true,
                 strokeEnabled: true,
                 shadowEnabled: true,
-                dashArrayEnabled: true
+                dashArrayEnabled: true,
+                fillPriority: 'color'
             });
 
             this.nodeType = 'Shape';
@@ -167,7 +168,7 @@
     Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
 
     // add getters and setters
-    Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled']);
+    Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled', 'fillPriority']);
 
     /**
      * set stroke color
@@ -309,6 +310,14 @@
      * @param {Number} repeat can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.  The default is 'no-repeat'
      */
 
+    /**
+     * set fill priority
+     * @name setFillPriority
+     * @methodOf Kinetic.Shape.prototype
+     * @param {Number} priority can be color, pattern, linear-gradient, or radial-gradient
+     *  The default is color.
+     */
+
     /**
      * get stroke color
      * @name getStroke
@@ -424,6 +433,12 @@
      * @methodOf Kinetic.Shape.prototype
      */
 
+    /**
+     * get fill priority
+     * @name getFillPriority
+     * @methodOf Kinetic.Shape.prototype
+     */
+
     Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']);
 
     /**

tests/js/functionalTests.js

@@ -46,7 +46,7 @@ Test.Modules.DD = {
         // which can't be simulated.  call _endDrag manually
         Kinetic.DD._endDrag();
     },
-    '*test dragstart, dragmove, dragend': function(containerId) {
+    'test dragstart, dragmove, dragend': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,

tests/js/unit/shapeTests.js

@@ -590,5 +590,50 @@ Test.Modules.SHAPE = {
         test(circle.getShadowEnabled() === true, 'shadowEnabled should be true');
         test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true');
 
+    },
+    'fill overrides': function(containerId) {
+
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var star = new Kinetic.Star({
+            x: 200,
+            y: 100,
+            numPoints: 5,
+            innerRadius: 40,
+            outerRadius: 70,
+
+            fill: 'red',
+            fillLinearGradientStartPoint: -35,
+            fillLinearGradientEndPoint: 35,
+            fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
+
+            stroke: 'blue',
+            strokeWidth: 5,
+            draggable: true
+        });
+
+        layer.add(star);
+        stage.add(layer);
+
+        //console.log(layer.toDataURL());
+
+        warn(layer.toDataURL() === dataUrls['red star'], 'star should have red fill');
+
+        star.setFillPriority('linear-gradient');
+        layer.draw();
+
+        warn(layer.toDataURL() === dataUrls['star with linear gradient fill'], 'star should have linear gradient fill');
+
+        star.setFillPriority('color');
+        layer.draw();
+        
+        warn(layer.toDataURL() === dataUrls['red star'], 'star should have red fill again');
+
+
     }
 };