added line join property to Shape along with getter and setter

dist/kinetic-core.js

@@ -1836,6 +1836,11 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
  * @constructor
  * @augments Kinetic.Node
  * @param {Object} config
+ * @config {String|CanvasGradient|CanvasPattern} [fill] fill
+ * @config {String} [stroke] stroke color
+ * @config {Number} [strokeWidth] stroke width
+ * @config {String} [lineJoin] line join.  Can be "miter", "round", or "bevel".  The default
+ *  is "miter"
  */
 Kinetic.Shape = function(config) {
     this.className = 'Shape';
@@ -1877,8 +1882,8 @@ Kinetic.Shape.prototype = {
         return this.tempLayer.getCanvas();
     },
     /**
-     * helper method to fill and stroke a shape based on its
+     * helper method to fill and stroke a shape
-     * fill, stroke, and strokeWidth properties
+     *  based on its fill, stroke, and strokeWidth, properties
      */
     fillStroke: function() {
         var context = this.getContext();
@@ -1893,9 +1898,19 @@ Kinetic.Shape.prototype = {
             context.stroke();
         }
     },
+    /**
+     * helper method to set the line join of a shape
+     * based on the lineJoin property
+     */
+    applyLineJoin: function() {
+        var context = this.getContext();
+        if(this.lineJoin !== undefined) {
+            context.lineJoin = this.lineJoin;
+        }
+    },
     /**
      * set fill which can be a color, gradient object,
-     * or pattern object
+     *  or pattern object
      * @param {String|CanvasGradient|CanvasPattern} fill
      */
     setFill: function(fill) {
@@ -1920,6 +1935,20 @@ Kinetic.Shape.prototype = {
     getStroke: function() {
         return this.stroke;
     },
+    /**
+     * set line join
+     * @param {String} lineJoin.  Can be "miter", "round", or "bevel".  The
+     *  default is "miter"
+     */
+    setLineJoin: function(lineJoin) {
+        this.lineJoin = lineJoin;
+    },
+    /**
+     * get line join
+     */
+    getLineJoin: function() {
+        return this.lineJoin;
+    },
     /**
      * set stroke width
      * @param {Number} strokeWidth
@@ -1982,6 +2011,7 @@ Kinetic.Rect = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(0, 0, this.width, this.height);
         context.closePath();
         this.fillStroke();
@@ -2046,7 +2076,8 @@ Kinetic.Circle = function(config) {
     config.drawFunc = function() {
         var canvas = this.getCanvas();
         var context = this.getContext();
-        context.beginPath();
+        context.beginPath();  
+        this.applyLineJoin();
         context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
         context.closePath();
         this.fillStroke();
@@ -2098,6 +2129,7 @@ Kinetic.Image = function(config) {
         var canvas = this.getCanvas();
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(0, 0, this.width, this.height);
         context.closePath();
         this.fillStroke();
@@ -2175,6 +2207,7 @@ Kinetic.Polygon = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(this.points[0].x, this.points[0].y);
         for(var n = 1; n < this.points.length; n++) {
             context.lineTo(this.points[n].x, this.points[n].y);
@@ -2220,6 +2253,7 @@ Kinetic.RegularPolygon = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(0, 0 - this.radius);
 
         for(var n = 1; n < this.sides; n++) {
@@ -2294,6 +2328,7 @@ Kinetic.Star = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(0, 0 - this.outerRadius);
 
         for(var n = 1; n < this.points * 2; n++) {
@@ -2421,6 +2456,7 @@ Kinetic.Text = function(config) {
         // draw path
         context.save();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
         context.closePath();
         this.fillStroke();

src/Shape.js

@@ -7,6 +7,11 @@
  * @constructor
  * @augments Kinetic.Node
  * @param {Object} config
+ * @config {String|CanvasGradient|CanvasPattern} [fill] fill
+ * @config {String} [stroke] stroke color
+ * @config {Number} [strokeWidth] stroke width
+ * @config {String} [lineJoin] line join.  Can be "miter", "round", or "bevel".  The default
+ *  is "miter"
  */
 Kinetic.Shape = function(config) {
     this.className = 'Shape';
@@ -48,8 +53,8 @@ Kinetic.Shape.prototype = {
         return this.tempLayer.getCanvas();
     },
     /**
-     * helper method to fill and stroke a shape based on its
+     * helper method to fill and stroke a shape
-     * fill, stroke, and strokeWidth properties
+     *  based on its fill, stroke, and strokeWidth, properties
      */
     fillStroke: function() {
         var context = this.getContext();
@@ -64,9 +69,19 @@ Kinetic.Shape.prototype = {
             context.stroke();
         }
     },
+    /**
+     * helper method to set the line join of a shape
+     * based on the lineJoin property
+     */
+    applyLineJoin: function() {
+        var context = this.getContext();
+        if(this.lineJoin !== undefined) {
+            context.lineJoin = this.lineJoin;
+        }
+    },
     /**
      * set fill which can be a color, gradient object,
-     * or pattern object
+     *  or pattern object
      * @param {String|CanvasGradient|CanvasPattern} fill
      */
     setFill: function(fill) {
@@ -91,6 +106,20 @@ Kinetic.Shape.prototype = {
     getStroke: function() {
         return this.stroke;
     },
+    /**
+     * set line join
+     * @param {String} lineJoin.  Can be "miter", "round", or "bevel".  The
+     *  default is "miter"
+     */
+    setLineJoin: function(lineJoin) {
+        this.lineJoin = lineJoin;
+    },
+    /**
+     * get line join
+     */
+    getLineJoin: function() {
+        return this.lineJoin;
+    },
     /**
      * set stroke width
      * @param {Number} strokeWidth

src/shapes/Circle.js

@@ -11,7 +11,8 @@ Kinetic.Circle = function(config) {
     config.drawFunc = function() {
         var canvas = this.getCanvas();
         var context = this.getContext();
-        context.beginPath();
+        context.beginPath();  
+        this.applyLineJoin();
         context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
         context.closePath();
         this.fillStroke();

src/shapes/Image.js

@@ -20,6 +20,7 @@ Kinetic.Image = function(config) {
         var canvas = this.getCanvas();
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(0, 0, this.width, this.height);
         context.closePath();
         this.fillStroke();

src/shapes/Polygon.js

@@ -11,6 +11,7 @@ Kinetic.Polygon = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(this.points[0].x, this.points[0].y);
         for(var n = 1; n < this.points.length; n++) {
             context.lineTo(this.points[n].x, this.points[n].y);

src/shapes/Rect.js

@@ -11,6 +11,7 @@ Kinetic.Rect = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(0, 0, this.width, this.height);
         context.closePath();
         this.fillStroke();

src/shapes/RegularPolygon.js

@@ -11,6 +11,7 @@ Kinetic.RegularPolygon = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(0, 0 - this.radius);
 
         for(var n = 1; n < this.sides; n++) {

src/shapes/Star.js

@@ -11,6 +11,7 @@ Kinetic.Star = function(config) {
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
+        this.applyLineJoin();
         context.moveTo(0, 0 - this.outerRadius);
 
         for(var n = 1; n < this.points * 2; n++) {

src/shapes/Text.js

@@ -64,6 +64,7 @@ Kinetic.Text = function(config) {
         // draw path
         context.save();
         context.beginPath();
+        this.applyLineJoin();
         context.rect(x, y, textWidth + p * 2, textHeight + p * 2);
         context.closePath();
         this.fillStroke();

tests/js/unitTests.js

@@ -596,7 +596,7 @@ Test.prototype.tests = {
         layer.add(poly);
         stage.add(layer);
     },
-    'SHAPES - add 5 point star': function(containerId) {
+    'SHAPES - add five point star': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -632,6 +632,35 @@ Test.prototype.tests = {
         });
         //stage.start();
     },
+    'SHAPES - add five point star with line join': 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,
+            points: 5,
+            innerRadius: 40,
+            outerRadius: 70,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 5,
+            lineJoin: "round"
+        });
+
+        layer.add(star);
+        stage.add(layer);
+
+        test(star.getLineJoin() === 'round', 'lineJoin property should be round');
+        star.setLineJoin('bevel');
+        test(star.getLineJoin() === 'bevel', 'lineJoin property should be bevel');
+
+        layer.draw();
+    },
     'SHAPES - add stroke rect': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -828,7 +857,7 @@ Test.prototype.tests = {
             text: 'Hello World!',
             fontSize: 60,
             fontFamily: 'Calibri',
-			fontStyle: 'normal',
+            fontStyle: 'normal',
             textFill: '#888',
             textStroke: '#333',
             padding: 10,
@@ -853,7 +882,7 @@ Test.prototype.tests = {
         text.setText('Bye World!');
         test(text.getText() === 'Bye World!', 'text should be Bye World!');
         test(text.getPadding() === 10, 'padding should be 10');
-		test(text.getFontStyle() == 'normal', 'font style should be normal');
+        test(text.getFontStyle() == 'normal', 'font style should be normal');
         text.setPadding(20);
         test(text.getPadding() === 20, 'padding should be 20');
 
@@ -867,10 +896,10 @@ Test.prototype.tests = {
         text.setTextFill('blue');
         text.setTextStroke('red');
         text.setTextStrokeWidth(10);
-        
+
         test(text.getFontFamily() === 'Arial', 'font family should be Arial');
         test(text.getFontSize() === 30, 'text size should be 30');
-		test(text.getFontStyle() == 'italic', 'font style should be italic');
+        test(text.getFontStyle() == 'italic', 'font style should be italic');
         test(text.getAlign() === 'right', 'text align should be right');
         test(text.getVerticalAlign() === 'top', 'vertical align should be top');
         test(text.getTextFill() === 'blue', 'text fill should be blue');
@@ -1087,8 +1116,8 @@ Test.prototype.tests = {
             }
         });
         var group = new Kinetic.Group({
-			x: 100,
+            x: 100,
-			rotationDeg: 90
+            rotationDeg: 90
         });
 
         var rect = new Kinetic.Rect({
@@ -1105,7 +1134,7 @@ Test.prototype.tests = {
         group.add(rect);
         layer.add(group);
         stage.add(layer);
-        
+
         // test absolute positions
         test(rect.getAbsolutePosition().x == 180, 'rect should be at x = 180');
         test(rect.getAbsolutePosition().y == 100, 'rect should be at y = 100');