From 7c03f56ae9ee5c8895b3337c462e3f5f1385e9e6 Mon Sep 17 00:00:00 2001
From: Eric Rowell <erowell83@gmail.com>
Date: Fri, 17 May 2013 15:09:57 -0700
Subject: [PATCH] added lots of constructor example docs

---
 src/Global.js        | 26 ++++++++++++++++++++++++++
 src/Node.js          |  6 +++---
 src/shapes/Blob.js   |  8 ++++++++
 src/shapes/Circle.js | 18 ++++++++++++++++++
 src/shapes/Image.js  | 12 ++++++++++++
 src/shapes/Rect.js   |  8 ++++++++
 6 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/Global.js b/src/Global.js
index 2153cddb..64ab9501 100644
--- a/src/Global.js
+++ b/src/Global.js
@@ -60,6 +60,22 @@ var Kinetic = {};
      * @param {Object} config
      * {{ShapeParams}}
      * {{NodeParams}}
+     * @example
+     * var customShape = new Kinetic.Shape({<br>
+     *   x: 5,<br>
+     *   y: 10,<br>
+     *   fill: 'red',<br>
+     *   // a Kinetic.Canvas renderer is passed into the drawFunc function<br>
+     *   drawFunc: function(canvas) {<br>
+     *     var context = canvas.getContext();<br>
+     *     context.beginPath();<br>
+     *     context.moveTo(200, 50);<br>
+     *     context.lineTo(420, 80);<br>
+     *     context.quadraticCurveTo(300, 100, 260, 170);<br>
+     *     context.closePath();<br>
+     *     canvas.fillStroke(this);<br>
+     *   }   
+     *});
      */
     Kinetic.Shape = function(config) {
         this._initShape(config);
@@ -88,6 +104,12 @@ var Kinetic = {};
      * @param {String|DomElement} config.container Container id or DOM element
      * {{NodeParams}}
      * {{ContainerParams}}
+     * @example
+     * var stage = new Kinetic.Stage({<br>
+     *   width: 500,<br>
+     *   height: 800,<br>
+     *   container: 'containerId'<br>
+     * });
      */
     Kinetic.Stage = function(config) {
         this._initStage(config);
@@ -104,6 +126,8 @@ var Kinetic = {};
      * to clear the canvas before each layer draw.  The default value is true.
      * {{NodeParams}}
      * {{ContainerParams}}
+     * @example
+     * var layer = new Kinetic.Layer();
      */
     Kinetic.Layer = function(config) {
         this._initLayer(config);
@@ -117,6 +141,8 @@ var Kinetic = {};
      * @param {Object} config
      * {{NodeParams}}
      * {{ContainerParams}}
+     * @example
+     * var group = new Kinetic.Group();
      */
     Kinetic.Group = function(config) {
         this._initGroup(config);
diff --git a/src/Node.js b/src/Node.js
index 1d350fe0..a3877a30 100644
--- a/src/Node.js
+++ b/src/Node.js
@@ -494,7 +494,7 @@
          * // move node in x direction by 1px<br>
          * node.move({<br>
          *   x: 1<br>
-         * })
+         * });
          */
         move: function() {
             var pos = Kinetic.Util._getXY([].slice.call(arguments)),
@@ -721,7 +721,7 @@
          * // fire custom event with custom event object<br>
          * node.fire('foo', {<br>
          *   bar: 10<br>
-         * });<br>
+         * });<br><br>
          *
          * // fire click event that doesn't bubble<br>
          * node.fire('click', null, false);
@@ -908,7 +908,7 @@
          *   callback: function(img) {<br>
          *     // do stuff with img<br>
          *   }<br>
-         * })
+         * });
          */
         toImage: function(config) {
             Kinetic.Util._getImage(this.toDataURL(config), function(img) {
diff --git a/src/shapes/Blob.js b/src/shapes/Blob.js
index 78bd027a..2c82a08d 100644
--- a/src/shapes/Blob.js
+++ b/src/shapes/Blob.js
@@ -11,6 +11,14 @@
      * @param {Number} [config.tension] default value is 1.  Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
      * {{ShapeParams}}
      * {{NodeParams}}
+     * @example
+     * var blob = new Kinetic.Blob({<br>
+     *   points: [73, 140, 340, 23, 500, 109, 300, 170],<br>
+     *   tension: 0.8,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black'<br>
+     *   strokeWidth: 5
+     * });
      */
     Kinetic.Blob = function(config) {
         this._initBlob(config);
diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js
index b6e9a224..36a018cb 100644
--- a/src/shapes/Circle.js
+++ b/src/shapes/Circle.js
@@ -8,6 +8,24 @@
      * @param {Number} config.radius
      * {{ShapeParams}}
      * {{NodeParams}}
+     * @example
+     * // create simple circle
+     * var circle = new Kinetic.Circle({<br>
+     *   radius: 5,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black'<br>
+     *   strokeWidth: 5
+     * });
+     *
+     * // create ellipse
+     * var circle = new Kinetic.Circle({<br>
+     *   radius: 5,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black'<br>
+     *   strokeWidth: 5,<br>
+     *   scaleX: 2,<br>
+     *   strokeScaleEnabled: false
+     * });
      */
     Kinetic.Circle = function(config) {
         this._initCircle(config);
diff --git a/src/shapes/Image.js b/src/shapes/Image.js
index a124380e..1e2f1971 100644
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -14,6 +14,18 @@
      * @param {Object} [config.crop]
      * {{ShapeParams}}
      * {{NodeParams}}
+     * @example
+     * var imageObj = new Image();<br>
+     * imageObj.onload = function() {<br>
+     *   var image = new Kinetic.Image({<br>
+     *     x: 200,<br>
+     *     y: 50,<br>
+     *     image: imageObj,<br>
+     *     width: 100,<br>
+     *     height: 100<br>
+     *   });<br>
+     * };<br>
+     * imageObj.src = '/path/to/image.jpg'
      */
     Kinetic.Image = function(config) {
         this._initImage(config);
diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js
index d5edf19a..be19004b 100644
--- a/src/shapes/Rect.js
+++ b/src/shapes/Rect.js
@@ -8,6 +8,14 @@
      * @param {Number} [config.cornerRadius]
      * {{ShapeParams}}
      * {{NodeParams}}
+     * @example
+     * var rect = new Kinetic.Rect({<br>
+     *   width: 100,<br>
+     *   height: 50,<br>
+     *   fill: 'red',<br>
+     *   stroke: 'black'<br>
+     *   strokeWidth: 5
+     * });
      */
     Kinetic.Rect = function(config) {
         this._initRect(config);