decided to split Circle and Ellipse shapes because it was causing too many issues related to the mixed data type of radius, which could be a number or object with x and y properties

Thorfile

@@ -6,7 +6,7 @@ class Build < Thor
     "license.js", "src/Global.js", "src/Transition.js", "src/filters/Grayscale.js",
     "src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js",
     "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js", 
-    "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
+    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
   ]
   
   desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

dist/kinetic-core.js

@@ -4366,6 +4366,56 @@ Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']
  * @methodOf Kinetic.Rect.prototype
  */
 ///////////////////////////////////////////////////////////////////////
+//  Circle
+///////////////////////////////////////////////////////////////////////
+/**
+ * Circle constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Circle = function(config) {
+	this._initCircle(config);	
+};
+
+Kinetic.Circle.prototype = {
+    _initCircle: function(config) {
+        this.setDefaultAttrs({
+            radius: 0
+        });
+
+        this.shapeType = "Circle";
+        config.drawFunc = this.drawFunc;
+
+        // call super constructor
+        Kinetic.Shape.call(this, config);
+    },
+    drawFunc: function(context) {
+        context.beginPath();
+        context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+    }
+};
+Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
+
+/**
+ * set radius
+ * @name setRadius
+ * @methodOf Kinetic.Circle.prototype
+ * @param {Number} radius
+ */
+
+/**
+ * get radius
+ * @name getRadius
+ * @methodOf Kinetic.Circle.prototype
+ */
+///////////////////////////////////////////////////////////////////////
 //  Ellipse
 ///////////////////////////////////////////////////////////////////////
 /**
@@ -4392,11 +4442,6 @@ Kinetic.Ellipse.prototype = {
 
         // call super constructor
         Kinetic.Shape.call(this, config);
-        this._convertRadius();
-        var that = this;
-        this.on('radiusChange.kinetic', function() {
-            that._convertRadius();
-        });
     },
     drawFunc: function(context) {
         var r = this.getRadius();
@@ -4410,30 +4455,10 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    },
-    /**
-     * converts numeric radius into an object
-     */
-    _convertRadius: function() {
-        var type = Kinetic.Type;
-        var radius = this.getRadius();
-        // if radius is already an object then return
-        if(type._isObject(radius)) {
-            return false;
-        }
-
-        /*
-         * directly set radius attr to avoid
-         * duplicate attr change event
-         */
-        this.attrs.radius = type._getXY(radius);
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
@@ -4441,7 +4466,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
  * set radius
  * @name setRadius
  * @methodOf Kinetic.Ellipse.prototype
- * @param {Number|Object|Array} radius
+ * @param {Object|Array} radius
  *  radius can be a number, in which the ellipse becomes a circle,
  *  it can be an object with an x and y component, or it
  *  can be an array in which the first element is the x component

src/shapes/Circle.js

@@ -0,0 +1,50 @@
+///////////////////////////////////////////////////////////////////////
+//  Circle
+///////////////////////////////////////////////////////////////////////
+/**
+ * Circle constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ */
+Kinetic.Circle = function(config) {
+	this._initCircle(config);	
+};
+
+Kinetic.Circle.prototype = {
+    _initCircle: function(config) {
+        this.setDefaultAttrs({
+            radius: 0
+        });
+
+        this.shapeType = "Circle";
+        config.drawFunc = this.drawFunc;
+
+        // call super constructor
+        Kinetic.Shape.call(this, config);
+    },
+    drawFunc: function(context) {
+        context.beginPath();
+        context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+    }
+};
+Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
+
+// add getters setters
+Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
+
+/**
+ * set radius
+ * @name setRadius
+ * @methodOf Kinetic.Circle.prototype
+ * @param {Number} radius
+ */
+
+/**
+ * get radius
+ * @name getRadius
+ * @methodOf Kinetic.Circle.prototype
+ */

src/shapes/Ellipse.js

@@ -25,11 +25,6 @@ Kinetic.Ellipse.prototype = {
 
         // call super constructor
         Kinetic.Shape.call(this, config);
-        this._convertRadius();
-        var that = this;
-        this.on('radiusChange.kinetic', function() {
-            that._convertRadius();
-        });
     },
     drawFunc: function(context) {
         var r = this.getRadius();
@@ -43,30 +38,10 @@ Kinetic.Ellipse.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
-    },
-    /**
-     * converts numeric radius into an object
-     */
-    _convertRadius: function() {
-        var type = Kinetic.Type;
-        var radius = this.getRadius();
-        // if radius is already an object then return
-        if(type._isObject(radius)) {
-            return false;
-        }
-
-        /*
-         * directly set radius attr to avoid
-         * duplicate attr change event
-         */
-        this.attrs.radius = type._getXY(radius);
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
 
-// Circle backwards compatibility
-Kinetic.Circle = Kinetic.Ellipse;
-
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 
@@ -74,7 +49,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
  * set radius
  * @name setRadius
  * @methodOf Kinetic.Ellipse.prototype
- * @param {Number|Object|Array} radius
+ * @param {Object|Array} radius
  *  radius can be a number, in which the ellipse becomes a circle,
  *  it can be an object with an x and y component, or it
  *  can be an array in which the first element is the x component

tests/js/functionalTests.js

@@ -9,7 +9,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -82,7 +82,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: 100,
             radius: 70,
@@ -158,14 +158,14 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        var circle1 = new Kinetic.Ellipse({
+        var circle1 = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
             fill: 'red'
         });
 
-        var circle2 = new Kinetic.Ellipse({
+        var circle2 = new Kinetic.Circle({
             x: 400,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -213,7 +213,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer({
             throttle: 999
         });
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -270,7 +270,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -547,7 +547,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var redCircle = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -557,7 +557,7 @@ Test.prototype.tests = {
             name: 'red'
         });
 
-        var greenCircle = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -635,7 +635,7 @@ Test.prototype.tests = {
         var groupMouseovers = 0;
         var groupMouseouts = 0;
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -645,7 +645,7 @@ Test.prototype.tests = {
             name: 'red'
         });
 
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -665,28 +665,28 @@ Test.prototype.tests = {
             console.log('group out')
         });
 
-        redEllipse.on('mouseover', function() {
+        redCircle.on('mouseover', function() {
             redMouseovers++;
             console.log('red over')
         });
 
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
             redMouseouts++;
             console.log('red out')
         });
 
-        greenEllipse.on('mouseover', function() {
+        greenCircle.on('mouseover', function() {
             greenMouseovers++;
             console.log('green over')
         });
 
-        greenEllipse.on('mouseout', function() {
+        greenCircle.on('mouseout', function() {
             greenMouseouts++;
             console.log('green out')
         });
 
-        group.add(redEllipse);
-        group.add(greenEllipse);
+        group.add(redCircle);
+        group.add(greenCircle);
 
         layer.add(group);
         stage.add(layer);
@@ -777,7 +777,7 @@ Test.prototype.tests = {
             throttle: 999
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,

tests/js/manualTests.js

@@ -6,7 +6,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -373,7 +373,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -382,25 +382,25 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        Ellipse.on('dragstart', function() {
+        Circle.on('dragstart', function() {
             log('dragstart');
         });
 
-        Ellipse.on('dragmove', function() {
+        Circle.on('dragmove', function() {
             log('dragmove');
         });
 
-        Ellipse.on('dragend', function() {
+        Circle.on('dragend', function() {
             log('dragend');
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             log('click');
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
@@ -411,7 +411,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -420,13 +420,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
-            log('mouseover red Ellipse');
+        redCircle.on('mouseover', function() {
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
-            log('mouseout red Ellipse');
+        redCircle.on('mouseout', function() {
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -435,19 +435,19 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
-            log('mouseover green Ellipse');
+        greenCircle.on('mouseover', function() {
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
-            log('mouseout green Ellipse');
+        greenCircle.on('mouseout', function() {
+            log('mouseout green Circle');
         });
 
-        layer.add(redEllipse);
-        layer.add(greenEllipse);
+        layer.add(redCircle);
+        layer.add(greenCircle);
 
         stage.add(layer);
         
-        //greenEllipse.hide();
+        //greenCircle.hide();
         layer.draw();
         
         //document.body.appendChild(layer.bufferCanvas.element);
@@ -462,7 +462,7 @@ Test.prototype.tests = {
         var redGroup = new Kinetic.Group();
         var greenGroup = new Kinetic.Group();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -471,13 +471,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
-            log('mouseover red Ellipse');
+        redCircle.on('mouseover', function() {
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
-            log('mouseout red Ellipse');
+        redCircle.on('mouseout', function() {
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -486,15 +486,15 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
-            log('mouseover green Ellipse');
+        greenCircle.on('mouseover', function() {
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
-            log('mouseout green Ellipse');
+        greenCircle.on('mouseout', function() {
+            log('mouseout green Circle');
         });
 
-        redGroup.add(redEllipse);
-        greenGroup.add(greenEllipse);
+        redGroup.add(redCircle);
+        greenGroup.add(greenCircle);
 
         layer.add(redGroup);
         layer.add(greenGroup);
@@ -510,7 +510,7 @@ Test.prototype.tests = {
         var redLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -519,13 +519,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mouseover', function() {
-            log('mouseover red Ellipse');
+        redCircle.on('mouseover', function() {
+            log('mouseover red Circle');
         });
-        redEllipse.on('mouseout', function() {
-            log('mouseout red Ellipse');
+        redCircle.on('mouseout', function() {
+            log('mouseout red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -534,15 +534,15 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mouseover', function() {
-            log('mouseover green Ellipse');
+        greenCircle.on('mouseover', function() {
+            log('mouseover green Circle');
         });
-        greenEllipse.on('mouseout', function() {
-            log('mouseout green Ellipse');
+        greenCircle.on('mouseout', function() {
+            log('mouseout green Circle');
         });
 
-        redLayer.add(redEllipse);
-        greenLayer.add(greenEllipse);
+        redLayer.add(redCircle);
+        greenLayer.add(greenCircle);
 
         stage.add(redLayer);
         stage.add(greenLayer);
@@ -557,7 +557,7 @@ Test.prototype.tests = {
         var redGroup = new Kinetic.Group();
         var greenGroup = new Kinetic.Group();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -566,10 +566,10 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('mousemove', function() {
-            log('mousemove red Ellipse');
+        redCircle.on('mousemove', function() {
+            log('mousemove red Circle');
         });
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -578,12 +578,12 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        greenEllipse.on('mousemove', function() {
-            log('mousemove green Ellipse');
+        greenCircle.on('mousemove', function() {
+            log('mousemove green Circle');
         });
 
-        redGroup.add(redEllipse);
-        greenGroup.add(greenEllipse);
+        redGroup.add(redCircle);
+        greenGroup.add(greenCircle);
 
         layer.add(redGroup);
         layer.add(greenGroup);
@@ -603,7 +603,7 @@ Test.prototype.tests = {
             log('mousemove group');
             //console.log(this);
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -612,7 +612,7 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        var greenEllipse = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -621,13 +621,13 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        group.add(redEllipse);
-        group.add(greenEllipse);
+        group.add(redCircle);
+        group.add(greenCircle);
 
         layer.add(group);
         stage.add(layer);
     },
-    'EVENTS - cancel event bubbling (only the red Ellipse should fire click event)': function(containerId) {
+    'EVENTS - cancel event bubbling (only the red Circle should fire click event)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -644,7 +644,7 @@ Test.prototype.tests = {
             log('click group');
             //console.log(this);
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
@@ -653,12 +653,12 @@ Test.prototype.tests = {
             stroke: 'black'
         });
 
-        redEllipse.on('click', function(evt) {
-            log('click red Ellipse');
+        redCircle.on('click', function(evt) {
+            log('click red Circle');
             evt.cancelBubble = true;
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
         layer.add(group);
         stage.add(layer);
     },
@@ -675,17 +675,17 @@ Test.prototype.tests = {
             log(evt.shape.getName());
 
         });
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 80,
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            name: 'Ellipse'
+            name: 'Circle'
         });
 
-        group.add(redEllipse);
+        group.add(redCircle);
         layer.add(group);
         stage.add(layer);
     },
@@ -697,21 +697,21 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var redEllipse = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 550,
             y: stage.getHeight() / 2,
             radius: 80,
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            name: 'Ellipse'
+            name: 'Circle'
         });
 
-        redEllipse.on('mouseout', function() {
+        redCircle.on('mouseout', function() {
             log('mouseout');
         });
 
-        layer.add(redEllipse);
+        layer.add(redCircle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
@@ -793,7 +793,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -802,9 +802,9 @@ Test.prototype.tests = {
             strokeWidth: 4,
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        var Ellipse2 = new Kinetic.Ellipse({
+        var Circle2 = new Kinetic.Circle({
             x: 350,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -815,15 +815,15 @@ Test.prototype.tests = {
         });
 
         /*
-         Ellipse.on('dragend', function() {
-         Ellipse.savePixels();
+         Circle.on('dragend', function() {
+         Circle.savePixels();
          });
          */
 
-        layer.add(Ellipse).add(Ellipse2);
+        layer.add(Circle).add(Circle2);
         stage.add(layer);
 
-        //Ellipse.savePixels();
+        //Circle.savePixels();
     },
     'DRAG AND DROP - drag and drop stage': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -846,7 +846,7 @@ Test.prototype.tests = {
              }
              */
         });
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -876,7 +876,7 @@ Test.prototype.tests = {
          });
          */
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - draggable true false': function(containerId) {
@@ -886,7 +886,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -895,12 +895,12 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
 
-        Ellipse.setDraggable(false);
+        Circle.setDraggable(false);
     },
     'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -941,7 +941,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -950,10 +950,10 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
         stage.setScale(0.5);
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape': function(containerId) {
@@ -963,7 +963,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -972,9 +972,9 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
 
         stage.setScale(1.5);
@@ -988,7 +988,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -997,21 +997,21 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.setDraggable(true);
+        Circle.setDraggable(true);
 
         stage.setScale(1.5);
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'DRAG AND DROP - check that green events are ignored when dragging red Ellipse': function(containerId) {
+    'DRAG AND DROP - check that green events are ignored when dragging red Circle': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse1 = new Kinetic.Ellipse({
+        var Circle1 = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1020,7 +1020,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var Ellipse2 = new Kinetic.Ellipse({
+        var Circle2 = new Kinetic.Circle({
             x: stage.getWidth() / 2 + 50,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1029,14 +1029,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse1.setDraggable(true);
+        Circle1.setDraggable(true);
 
-        Ellipse2.on('mouseover', function() {
-            log('mouseover green Ellipse');
+        Circle2.on('mouseover', function() {
+            log('mouseover green Circle');
         });
 
-        layer.add(Ellipse1);
-        layer.add(Ellipse2);
+        layer.add(Circle1);
+        layer.add(Circle2);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop constrianed horiztontally inside positioned group': function(containerId) {
@@ -1050,7 +1050,7 @@ Test.prototype.tests = {
             x: 0,
             y: 10
         });
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1061,7 +1061,7 @@ Test.prototype.tests = {
             dragConstraint: 'horizontal'
         });
 
-        group.add(Ellipse);
+        group.add(Circle);
         layer.add(group);
         stage.add(layer);
     },
@@ -1072,7 +1072,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1083,7 +1083,7 @@ Test.prototype.tests = {
             dragConstraint: 'vertical'
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
@@ -1093,7 +1093,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1104,7 +1104,7 @@ Test.prototype.tests = {
             dragConstraint: 'none'
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
@@ -1114,7 +1114,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1127,7 +1127,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
@@ -1137,7 +1137,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1150,7 +1150,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
@@ -1160,7 +1160,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1173,7 +1173,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
@@ -1183,7 +1183,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1196,7 +1196,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
@@ -1206,7 +1206,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1222,7 +1222,7 @@ Test.prototype.tests = {
             }
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
@@ -1237,7 +1237,7 @@ Test.prototype.tests = {
         container.style.overflow = 'auto';
 
         var layer = new Kinetic.Layer();
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: 100,
             radius: 50,
@@ -1247,7 +1247,7 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
     'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
@@ -1264,7 +1264,7 @@ Test.prototype.tests = {
             }
         });
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: 40,
             y: 40,
             radius: 70,
@@ -1274,7 +1274,7 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        group.add(Ellipse);
+        group.add(Circle);
         layer.add(group);
         stage.add(layer);
     },
@@ -1446,7 +1446,7 @@ Test.prototype.tests = {
 
         stage.draw();
     },
-    'STAGE - save image as png (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as png (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1454,7 +1454,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1463,14 +1463,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL());
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'STAGE - save image as low quality jpg (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as low quality jpg (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1478,7 +1478,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1487,14 +1487,14 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL('image/jpeg', 0));
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     },
-    'STAGE - save image as high quality jpg (click on Ellipse to open new window)': function(containerId) {
+    'STAGE - save image as high quality jpg (click on Circle to open new window)': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -1502,7 +1502,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var Ellipse = new Kinetic.Ellipse({
+        var Circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1511,11 +1511,11 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        Ellipse.on('click', function() {
+        Circle.on('click', function() {
             window.open(layer.toDataURL('image/jpeg', 1));
         });
 
-        layer.add(Ellipse);
+        layer.add(Circle);
         stage.add(layer);
     }
 };

tests/js/performanceTests.js

@@ -1,5 +1,5 @@
 Test.prototype.tests = {
-    '*DRAWING - draw rect': function(containerId) {
+    'DRAWING - draw rect': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,

tests/js/unitTests.js

@@ -27,7 +27,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -80,7 +80,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -103,7 +103,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -142,7 +142,7 @@ Test.prototype.tests = {
             throttle: 9999
         });
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -167,7 +167,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -190,7 +190,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -206,7 +206,7 @@ Test.prototype.tests = {
         group.add(circle);
         layer.draw();
 
-        var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
+        var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
 
         //console.log(stage.toJSON())
         //test(stage.toJSON() === expectedJson, 'problem with serialization');
@@ -220,7 +220,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -250,7 +250,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 100,
             y: 100,
             radius: 70,
@@ -270,7 +270,7 @@ Test.prototype.tests = {
 
         test(attrs.x === 100, 'x attr should be 100');
         test(attrs.y === 100, 'y attr should be 100');
-        test(attrs.radius.x === 70, 'radius attr should be 70');
+        test(attrs.radius === 70, 'radius attr should be 70');
         test(attrs.fill === 'green', 'fill attr should be fill');
         test(attrs.stroke === 'black', 'stroke attr should be stroke');
         test(attrs.strokeWidth === 4, 'strokeWidth attr should be strokeWidth');
@@ -293,7 +293,7 @@ Test.prototype.tests = {
             height: 200
         });
 
-        var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
+        var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
         //stage.load(json);
 
         //test(stage.toJSON() === json, "problem loading stage with json");
@@ -389,7 +389,7 @@ Test.prototype.tests = {
 
         var group = new Kinetic.Group();
 
-        var redCircle = new Kinetic.Ellipse({
+        var redCircle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -399,7 +399,7 @@ Test.prototype.tests = {
             id: 'redCircle'
         });
 
-        var greenCircle = new Kinetic.Ellipse({
+        var greenCircle = new Kinetic.Circle({
             x: 300,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -464,7 +464,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -489,7 +489,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -528,7 +528,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer({
             id: 'myLayer'
         });
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -555,7 +555,7 @@ Test.prototype.tests = {
 
         var node;
         node = stage.get('#myCircle')[0];
-        test(node.shapeType === 'Ellipse', 'shape type should be Ellipse');
+        test(node.shapeType === 'Circle', 'shape type should be Circle');
         node = layer.get('.myRect')[0];
         test(node.shapeType === 'Rect', 'shape type should be rect');
         node = layer.get('#myLayer')[0];
@@ -571,7 +571,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -623,7 +623,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -666,7 +666,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -690,7 +690,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -726,7 +726,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer({
             name: 'myLayer'
         });
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -770,7 +770,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var shape1 = new Kinetic.Ellipse({
+        var shape1 = new Kinetic.Circle({
             x: 150,
             y: 100,
             radius: 50,
@@ -778,7 +778,7 @@ Test.prototype.tests = {
             name: 'myCircle'
         });
 
-        var shape2 = new Kinetic.Ellipse({
+        var shape2 = new Kinetic.Circle({
             x: 250,
             y: 100,
             radius: 50,
@@ -809,7 +809,7 @@ Test.prototype.tests = {
         var layer1 = new Kinetic.Layer();
         var layer2 = new Kinetic.Layer();
 
-        var shape1 = new Kinetic.Ellipse({
+        var shape1 = new Kinetic.Circle({
             x: 150,
             y: 100,
             radius: 50,
@@ -817,7 +817,7 @@ Test.prototype.tests = {
             name: 'myCircle'
         });
 
-        var shape2 = new Kinetic.Ellipse({
+        var shape2 = new Kinetic.Circle({
             x: 250,
             y: 100,
             radius: 50,
@@ -908,7 +908,7 @@ Test.prototype.tests = {
         var layer1 = new Kinetic.Layer();
         var layer2 = new Kinetic.Layer();
 
-        var circle1 = new Kinetic.Ellipse({
+        var circle1 = new Kinetic.Circle({
             x: 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -916,7 +916,7 @@ Test.prototype.tests = {
             stroke: 'black',
             strokeWidth: 4
         });
-        var circle2 = new Kinetic.Ellipse({
+        var circle2 = new Kinetic.Circle({
             x: 150,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -953,7 +953,7 @@ Test.prototype.tests = {
 
         var layer = new Kinetic.Layer();
 
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -993,7 +993,7 @@ Test.prototype.tests = {
 
         var group = new Kinetic.Group();
 
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1035,7 +1035,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle1 = new Kinetic.Ellipse({
+        var circle1 = new Kinetic.Circle({
             x: 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1044,7 +1044,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var circle2 = new Kinetic.Ellipse({
+        var circle2 = new Kinetic.Circle({
             x: 300,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1077,7 +1077,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1100,7 +1100,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var circle1 = new Kinetic.Ellipse({
+        var circle1 = new Kinetic.Circle({
             x: 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1108,7 +1108,7 @@ Test.prototype.tests = {
             stroke: 'black',
             strokeWidth: 4
         });
-        var circle2 = new Kinetic.Ellipse({
+        var circle2 = new Kinetic.Circle({
             x: 150,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1149,7 +1149,7 @@ Test.prototype.tests = {
         var greenGroup = new Kinetic.Group();
         var blueGroup = new Kinetic.Group();
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: stage.getWidth() / 2 - 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1159,7 +1159,7 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: stage.getWidth() / 2 + 100,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1177,7 +1177,7 @@ Test.prototype.tests = {
 
         blueLayer.removeChildren();
         var blueGroup2 = new Kinetic.Group();
-        var bluecircle2 = new Kinetic.Ellipse({
+        var bluecircle2 = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1205,7 +1205,7 @@ Test.prototype.tests = {
             });
             var layer = new Kinetic.Layer();
             var group = new Kinetic.Group();
-            var circle = new Kinetic.Ellipse({
+            var circle = new Kinetic.Circle({
                 x: stage.getWidth() / 2,
                 y: stage.getHeight() / 2,
                 radius: 70,
@@ -1280,7 +1280,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1350,24 +1350,6 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
     },
-    'SHAPE - add circle using Ellipse': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4
-        });
-        layer.add(circle);
-        stage.add(layer);
-    },
     'SHAPE - add circle using Circle': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -1411,7 +1393,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        circle = new Kinetic.Ellipse({
+        circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1452,7 +1434,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -1676,7 +1658,7 @@ Test.prototype.tests = {
                 height: 200
             });
             var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Ellipse({
+            var circle = new Kinetic.Circle({
                 x: 200,
                 y: 60,
                 radius: 50,
@@ -2275,7 +2257,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -2295,7 +2277,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -2801,7 +2783,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -2823,7 +2805,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3681,7 +3663,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3761,7 +3743,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3798,7 +3780,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3855,7 +3837,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3891,7 +3873,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3914,7 +3896,7 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -3988,7 +3970,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4019,7 +4001,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4039,7 +4021,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4075,14 +4057,14 @@ Test.prototype.tests = {
         var group3 = new Kinetic.Group();
         var group4 = new Kinetic.Group();
 
-        var shape1 = new Kinetic.Ellipse({
+        var shape1 = new Kinetic.Circle({
             x: 150,
             y: stage.getHeight() / 2,
             radius: 40,
             fill: 'green'
         });
 
-        var shape2 = new Kinetic.Ellipse({
+        var shape2 = new Kinetic.Circle({
             x: 250,
             y: stage.getHeight() / 2,
             radius: 40,
@@ -4132,7 +4114,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4141,7 +4123,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4172,7 +4154,7 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4181,7 +4163,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4214,7 +4196,7 @@ Test.prototype.tests = {
         var greenGroup = new Kinetic.Group();
         var blueGroup = new Kinetic.Group();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4223,7 +4205,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4259,7 +4241,7 @@ Test.prototype.tests = {
         var greenGroup = new Kinetic.Group();
         var blueGroup = new Kinetic.Group();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4268,7 +4250,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4303,7 +4285,7 @@ Test.prototype.tests = {
         var blueLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4312,7 +4294,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4344,7 +4326,7 @@ Test.prototype.tests = {
         var blueLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4353,7 +4335,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4385,7 +4367,7 @@ Test.prototype.tests = {
         var blueLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4394,7 +4376,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4425,7 +4407,7 @@ Test.prototype.tests = {
         var blueLayer = new Kinetic.Layer();
         var greenLayer = new Kinetic.Layer();
 
-        var bluecircle = new Kinetic.Ellipse({
+        var bluecircle = new Kinetic.Circle({
             x: 200,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4434,7 +4416,7 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        var greencircle = new Kinetic.Ellipse({
+        var greencircle = new Kinetic.Circle({
             x: 280,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4690,7 +4672,7 @@ Test.prototype.tests = {
             height: 200
         });
         var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
+        var circle = new Kinetic.Circle({
             x: 380,
             y: stage.getHeight() / 2,
             radius: 70,
@@ -4907,35 +4889,35 @@ Test.prototype.tests = {
 
         layer.add(path);
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 200,
             y: 300,
             radius: 10,
             fill: 'black'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 600,
             y: 300,
             radius: 10,
             fill: 'black'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 1000,
             y: 300,
             radius: 10,
             fill: 'black'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 400,
             y: 50,
             radius: 10,
             fill: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 800,
             y: 550,
             radius: 10,
@@ -4974,49 +4956,49 @@ Test.prototype.tests = {
 
         layer.add(path);
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 100,
             y: 200,
             radius: 10,
             stroke: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 250,
             y: 200,
             radius: 10,
             stroke: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 400,
             y: 200,
             radius: 10,
             stroke: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 100,
             y: 100,
             radius: 10,
             fill: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 250,
             y: 100,
             radius: 10,
             fill: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 400,
             y: 300,
             radius: 10,
             fill: '#888'
         }));
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 250,
             y: 300,
             radius: 10,
@@ -5108,7 +5090,7 @@ Test.prototype.tests = {
         path.setData(c);
         layer.add(path);
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: 10,
             y: 10,
             radius: 10,
@@ -5120,7 +5102,7 @@ Test.prototype.tests = {
         test(Math.round(p1.x) === 110, 'point X value should be 110');
         test(Math.round(p1.y) === 85, 'point Y value should be 85');
 
-        layer.add(new Kinetic.Ellipse({
+        layer.add(new Kinetic.Circle({
             x: p1.x,
             y: p1.y,
             radius: 10,