added line join property to Shape along with getter and setter

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
-     * fill, stroke, and strokeWidth properties
+     * helper method to fill and stroke a shape
+     *  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();