moved line cap logic to shape level so that Path can also utilize line caps

dist/kinetic-core.js

@@ -4067,10 +4067,16 @@ Kinetic.Shape.prototype = {
             this.drawImage.apply(this, a);
         }
     },
+    applyOpacity: function(context) {
+        var absOpacity = this.getAbsoluteOpacity();
+        if(absOpacity !== 1) {
+            context.globalAlpha = absOpacity;
+        }
+    },
     /**
      * helper method to set the line join of a shape
-     * based on the lineJoin property
+     * based on the applyLineJoin property
-     * @name applyLineJoin
+     * @name lineJoin
      * @methodOf Kinetic.Shape.prototype
      */
     applyLineJoin: function(context) {
@@ -4078,6 +4084,17 @@ Kinetic.Shape.prototype = {
             context.lineJoin = this.attrs.lineJoin;
         }
     },
+    /**
+     * helper method to set the line cap of a path
+     * based on the lineCap property
+     * @name applyLineCap
+     * @methodOf Kinetic.Shape.prototype
+     */
+    applyLineCap: function(context) {
+        if(this.attrs.lineCap) {
+            context.lineCap = this.attrs.lineCap;
+        }
+    },
     /**
      * set shadow object
      * @name setShadow
@@ -4215,14 +4232,9 @@ Kinetic.Shape.prototype = {
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
 
-            /*
+            this.applyOpacity(context);
-             * pre styles include opacity, linejoin
-             */
-            var absOpacity = this.getAbsoluteOpacity();
-            if(absOpacity !== 1) {
-                context.globalAlpha = absOpacity;
-            }
             this.applyLineJoin(context);
+            this.applyLineCap(context);
 
             // draw the shape
             this.appliedShadow = false;
@@ -5278,10 +5290,6 @@ Kinetic.Line.prototype = {
             }
         }
 
-        if(!!this.attrs.lineCap) {
-            context.lineCap = this.attrs.lineCap;
-        }
-
         this.stroke(context);
     },
     /**

src/Shape.js

@@ -299,10 +299,16 @@ Kinetic.Shape.prototype = {
             this.drawImage.apply(this, a);
         }
     },
+    applyOpacity: function(context) {
+        var absOpacity = this.getAbsoluteOpacity();
+        if(absOpacity !== 1) {
+            context.globalAlpha = absOpacity;
+        }
+    },
     /**
      * helper method to set the line join of a shape
-     * based on the lineJoin property
+     * based on the applyLineJoin property
-     * @name applyLineJoin
+     * @name lineJoin
      * @methodOf Kinetic.Shape.prototype
      */
     applyLineJoin: function(context) {
@@ -310,6 +316,17 @@ Kinetic.Shape.prototype = {
             context.lineJoin = this.attrs.lineJoin;
         }
     },
+    /**
+     * helper method to set the line cap of a path
+     * based on the lineCap property
+     * @name applyLineCap
+     * @methodOf Kinetic.Shape.prototype
+     */
+    applyLineCap: function(context) {
+        if(this.attrs.lineCap) {
+            context.lineCap = this.attrs.lineCap;
+        }
+    },
     /**
      * set shadow object
      * @name setShadow
@@ -447,14 +464,9 @@ Kinetic.Shape.prototype = {
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
 
-            /*
+            this.applyOpacity(context);
-             * pre styles include opacity, linejoin
-             */
-            var absOpacity = this.getAbsoluteOpacity();
-            if(absOpacity !== 1) {
-                context.globalAlpha = absOpacity;
-            }
             this.applyLineJoin(context);
+            this.applyLineCap(context);
 
             // draw the shape
             this.appliedShadow = false;

src/shapes/Line.js

@@ -46,10 +46,6 @@ Kinetic.Line.prototype = {
             }
         }
 
-        if(!!this.attrs.lineCap) {
-            context.lineCap = this.attrs.lineCap;
-        }
-
         this.stroke(context);
     },
     /**

tests/js/unitTests.js

@@ -2020,7 +2020,8 @@ Test.prototype.tests = {
         var line = new Kinetic.Line({
             points: [73, 160, 340, 23, 500, 109, 500, 180],
             stroke: 'blue',
-            strokeWidth: 5,
+            
+            strokeWidth: 10,
             lineCap: 'round',
             lineJoin: 'round',
             draggable: true,
@@ -2029,7 +2030,8 @@ Test.prototype.tests = {
                 color: '#aaa',
                 blur: 10,
                 offset: [20, 20]
-            }
+            },
+            opacity: 0.2
         });
 
         layer.add(line);
@@ -2760,7 +2762,7 @@ Test.prototype.tests = {
          });
          */
     },
-    'SHAPE - text multi line with shadows': function(containerId) {
+    '*SHAPE - text multi line with shadows': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2788,7 +2790,7 @@ Test.prototype.tests = {
                 color: 'black',
                 blur: 1,
                 offset: [10, 10],
-                opacity: 0.2
+                opacity: 0.5
             },
             cornerRadius: 10,
             draggable: true,
@@ -5008,6 +5010,32 @@ Test.prototype.tests = {
 
         path.setData('M200,100h100v50z');
 
+    },
+    'PATH - add path with line cap and line join': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 1024,
+            height: 480,
+            scale: 0.5,
+            x: 50,
+            y: 10
+        });
+        var layer = new Kinetic.Layer();
+
+        var path = new Kinetic.Path({
+            data: 'M200,100h100v50',
+            stroke: '#333',
+            strokeWidth: 20,
+            draggable: true,
+            lineCap: 'round',
+            lineJoin: 'round'
+        });
+
+        layer.add(path);
+
+        stage.add(layer);
+
+
     },
     'PATH - moveTo with implied lineTos and trailing comma': function(containerId) {
         var stage = new Kinetic.Stage({