moved dashArray attr to Shape level and hooked into native setLineDash method now that it's in the spec. This enables dashed lines for any type of stroke, not just straight lines

src/Canvas.js

@@ -183,9 +183,18 @@
             }
         },
         _stroke: function(shape, skipShadow) {
-            var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth(), shadow = shape.getShadow();
+            var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth(), shadow = shape.getShadow(), dashArray = shape.getDashArray();
             if(stroke || strokeWidth) {
                 context.save();
+                this._applyLineCap(shape);
+                if(dashArray) {
+                    if(context.setLineDash) {
+                        context.setLineDash(dashArray);
+                    }
+                    else {
+                        Kinetic.Global.warn('Could not apply dash array because your browser does not support it.');
+                    }
+                }
                 if(!skipShadow && shadow) {
                     this._applyShadow(shape);
                 }
@@ -219,6 +228,12 @@
                 context.shadowOffsetX = offset.x;
                 context.shadowOffsetY = offset.y;
             }
+        },
+        _applyLineCap: function(shape) {
+            var lineCap = shape.getLineCap();
+            if(lineCap) {
+                this.context.lineCap = lineCap;
+            }
         }
     };
 
@@ -237,12 +252,19 @@
         _stroke: function(shape) {
             var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth();
             if(stroke || strokeWidth) {
+                this._applyLineCap(shape);
                 context.save();
                 context.lineWidth = strokeWidth || 2;
                 context.strokeStyle = '#' + shape.colorKey;
                 context.stroke(context);
                 context.restore();
             }
+        },
+        _applyLineCap: function(shape) {
+            var lineCap = shape.getLineCap();
+            if(lineCap) {
+                this.context.lineCap = lineCap;
+            }
         }
     };
 })();

src/Shape.js

@@ -195,12 +195,6 @@
                 context.lineJoin = lineJoin;
             }
         },
-        _applyLineCap: function(context) {
-            var lineCap = this.getLineCap();
-            if(lineCap) {
-                context.lineCap = lineCap;
-            }
-        },
         /**
          * set shadow object
          * @name setShadow
@@ -314,7 +308,6 @@
                 context.save();
                 this._applyOpacity(context);
                 this._applyLineJoin(context);
-                this._applyLineCap(context);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
@@ -340,7 +333,6 @@
                 context.save();
                 this._applyOpacity(context);
                 this._applyLineJoin(context);
-                this._applyLineCap(context);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
@@ -365,7 +357,6 @@
 
                 context.save();
                 this._applyLineJoin(context);
-                this._applyLineCap(context);
                 var len = family.length;
                 for(var n = 0; n < len; n++) {
                     var node = family[n], t = node.getTransform(), m = t.getMatrix();
@@ -388,7 +379,7 @@
     Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
 
     // add getters and setters
-    Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'cornerRadius']);
+    Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'cornerRadius', 'dashArray']);
     Kinetic.Node.addGetters(Kinetic.Shape, ['shadow', 'fill']);
 
     /**
@@ -441,6 +432,19 @@
      * @param {String} lineCap
      */
 
+    /**
+     * set dash array.
+     * @name setDashArray
+     * @methodOf Kinetic.Line.prototype
+     * @param {Array} dashArray
+     *  examples:<br>
+     *  [10, 5] dashes are 10px long and 5 pixels apart
+     *  [10, 20, 0, 20] if using a round lineCap, the line will
+     *  be made up of alternating dashed lines that are 10px long
+     *  and 20px apart, and dots that have a radius of 5 and are 20px
+     *  apart
+     */
+
     /**
      * get stroke color
      * @name getStroke
@@ -494,4 +498,10 @@
      * @name getLineCap
      * @methodOf Kinetic.Shape.prototype
      */
+
+    /**
+     * get dash array
+     * @name getDashArray
+     * @methodOf Kinetic.Line.prototype
+     */
 })();

src/shapes/Line.js

@@ -27,22 +27,11 @@
         drawFunc: function(context) {
             var lastPos = {}, points = this.getPoints(), length = points.length, dashArray = this.getDashArray(), dashLength = dashArray.length;
             context.beginPath();
-
             context.moveTo(points[0].x, points[0].y);
 
             for(var n = 1; n < length; n++) {
-                var x = points[n].x;
-                var y = points[n].y;
-                if(dashLength > 0) {
-                    // draw dashed line
-                    var lastX = points[n - 1].x;
-                    var lastY = points[n - 1].y;
-                    this._dashedLine(context, lastX, lastY, x, y, dashArray);
-                }
-                else {
-                    // draw normal line
-                    context.lineTo(x, y);
-                }
+                var point = points[n];
+                context.lineTo(point.x, point.y);
             }
 
             this.stroke(context);
@@ -56,79 +45,13 @@
          */
         setPoints: function(val) {
             this.setAttr('points', Kinetic.Type._getPoints(val));
-        },
-        /**
-         * draw dashed line.  Written by Phrogz
-         */
-        _dashedLine: function(context, x, y, x2, y2, dashArray) {
-            var dashCount = dashArray.length;
-
-            var dx = (x2 - x), dy = (y2 - y);
-            var xSlope = dx > dy;
-            var slope = (xSlope) ? dy / dx : dx / dy;
-
-            /*
-             * gaurd against slopes of infinity
-             */
-            if(slope > 9999) {
-                slope = 9999;
-            }
-            else if(slope < -9999) {
-                slope = -9999;
-            }
-
-            var distRemaining = Math.sqrt(dx * dx + dy * dy);
-            var dashIndex = 0, draw = true;
-            while(distRemaining >= 0.1 && dashIndex < 10000) {
-                var dashLength = dashArray[dashIndex++ % dashCount];
-                if(dashLength === 0) {
-                    dashLength = 0.001;
-                }
-                if(dashLength > distRemaining) {
-                    dashLength = distRemaining;
-                }
-                var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
-                if(xSlope) {
-                    x += dx < 0 && dy < 0 ? step * -1 : step;
-                    y += dx < 0 && dy < 0 ? slope * step * -1 : slope * step;
-                }
-                else {
-                    x += dx < 0 && dy < 0 ? slope * step * -1 : slope * step;
-                    y += dx < 0 && dy < 0 ? step * -1 : step;
-                }
-                context[draw ? 'lineTo' : 'moveTo'](x, y);
-                distRemaining -= dashLength;
-                draw = !draw;
-            }
-
-            context.moveTo(x2, y2);
         }
     };
     Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
 
     // add getters setters
-    Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray']);
     Kinetic.Node.addGetters(Kinetic.Line, ['points']);
 
-    /**
-     * set dash array.
-     * @name setDashArray
-     * @methodOf Kinetic.Line.prototype
-     * @param {Array} dashArray
-     *  examples:<br>
-     *  [10, 5] dashes are 10px long and 5 pixels apart
-     *  [10, 20, 0, 20] if using a round lineCap, the line will
-     *  be made up of alternating dashed lines that are 10px long
-     *  and 20px apart, and dots that have a radius of 5 and are 20px
-     *  apart
-     */
-
-    /**
-     * get dash array
-     * @name getDashArray
-     * @methodOf Kinetic.Line.prototype
-     */
-
     /**
      * get points array
      * @name getPoints