moved width and height attrs to node level. This enables us to get and set shape dimensions via width and height. For example, if you have a circle with radius 50, getWidth() will return 100. Not all shapes width and height methods have been implemented yet

dist/kinetic-core.js

@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Oct 06 2012
+ * Date: Oct 10 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -1527,7 +1527,6 @@ Kinetic.Node.prototype = {
                 addChildren(nodes);
             }
         }
-
         if(that.nodeType !== 'Stage') {
             addChildren(that.getStage().getChildren());
         }
@@ -1742,7 +1741,7 @@ Kinetic.Node.prototype = {
      */
     getAbsoluteOpacity: function() {
         var absOpacity = this.getOpacity();
-        if (this.getParent()) {
+        if(this.getParent()) {
             absOpacity *= this.getParent().getAbsoluteOpacity();
         }
         return absOpacity;
@@ -2058,6 +2057,46 @@ Kinetic.Node.prototype = {
         this.setAttr('scale', pos);
 
     },
+    /**
+     * set size
+     * @name setSize
+     * @methodOf Kinetic.Node.prototype
+     * @param {Number} width
+     * @param {Number} height
+     */
+    setSize: function() {
+        // set stage dimensions
+        var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
+        this.setWidth(size.width);
+        this.setHeight(size.height);
+    },
+    /**
+     * get size
+     * @name getSize
+     * @methodOf Kinetic.Node.prototype
+     */
+    getSize: function() {
+        return {
+            width: this.getWidth(),
+            height: this.getHeight()
+        };
+    },
+    /**
+     * get width
+     * @name getWidth
+     * @methodOf Kinetic.Node.prototype
+     */
+    getWidth: function() {
+        return this.attrs.width || 0;
+    },
+    /**
+     * get height
+     * @name getHeight
+     * @methodOf Kinetic.Node.prototype
+     */
+    getHeight: function() {
+        return this.attrs.height || 0;
+    },
     _get: function(selector) {
         return this.nodeType === selector ? [this] : [];
     },
@@ -2309,12 +2348,12 @@ Kinetic.Node._createNode = function(obj, container) {
     else {
         type = obj.nodeType;
     }
-    
+
     // if container was passed in, add it to attrs
-    if (container) {
+    if(container) {
-    	obj.attrs.container = container;
+        obj.attrs.container = container;
     }
-    
+
     var no = new Kinetic[type](obj.attrs);
     if(obj.children) {
         for(var n = 0; n < obj.children.length; n++) {
@@ -2327,6 +2366,7 @@ Kinetic.Node._createNode = function(obj, container) {
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
+Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
 
 // mappings
 /**
@@ -2420,6 +2460,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {Boolean} listening
  */
 
+/**
+ * set width
+ * @name setWidth
+ * @methodOf Kinetic.Node.prototype
+ * @param {Number} width
+ */
+
+/**
+ * set height
+ * @name setHeight
+ * @methodOf Kinetic.Node.prototype
+ * @param {Number} height
+ */
+
 /**
  * get scale
  * @name getScale
@@ -2491,7 +2545,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @name getListening
  * @methodOf Kinetic.Node.prototype
  */
-
 ///////////////////////////////////////////////////////////////////////
 //  Container
 ///////////////////////////////////////////////////////////////////////
@@ -2797,19 +2850,6 @@ Kinetic.Stage.prototype = {
     draw: function() {
         this._draw();
     },
-    /**
-     * set stage size
-     * @name setSize
-     * @methodOf Kinetic.Stage.prototype
-     * @param {Number} width
-     * @param {Number} height
-     */
-    setSize: function() {
-        // set stage dimensions
-        var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
-        this.setWidth(size.width);
-        this.setHeight(size.height);
-    },
     /**
      * set height
      * @name setHeight
@@ -2817,7 +2857,7 @@ Kinetic.Stage.prototype = {
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.setAttr('height', height);
+        Kinetic.Node.prototype.setHeight.call(this, height);
         this._resizeDOM();
     },
     /**
@@ -2827,20 +2867,9 @@ Kinetic.Stage.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.setAttr('width', width);
+        Kinetic.Node.prototype.setWidth.call(this, width);
         this._resizeDOM();
     },
-    /**
-     * get stage size
-     * @name getSize
-     * @methodOf Kinetic.Stage.prototype
-     */
-    getSize: function() {
-        return {
-            width: this.attrs.width,
-            height: this.attrs.height
-        };
-    },
     /**
      * clear all layers
      * @name clear
@@ -2960,7 +2989,6 @@ Kinetic.Stage.prototype = {
             };
             imageObj.src = layerUrl;
         }
-
         drawLayer(0);
     },
     /**
@@ -3441,25 +3469,13 @@ Kinetic.Stage.prototype = {
 Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
 
 // add getters and setters
-Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
+Kinetic.Node.addGetters(Kinetic.Stage, ['container']);
 
 /**
  * get container DOM element
  * @name getContainer
  * @methodOf Kinetic.Stage.prototype
  */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Stage.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Stage.prototype
- */
 ///////////////////////////////////////////////////////////////////////
 //  Layer
 ///////////////////////////////////////////////////////////////////////
@@ -4425,48 +4441,6 @@ Kinetic.Rect.prototype = {
     }
 };
 Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
-
-// add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
-
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} width
- */
-
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} height
- */
-
-/**
- * set corner radius
- * @name setCornerRadius
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} radius
- */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Rect.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Rect.prototype
- */
-
-/**
- * get corner radius
- * @name getCornerRadius
- * @methodOf Kinetic.Rect.prototype
- */
 ///////////////////////////////////////////////////////////////////////
 //  Circle
 ///////////////////////////////////////////////////////////////////////
@@ -4477,7 +4451,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
-	this._initCircle(config);	
+    this._initCircle(config);
 };
 
 Kinetic.Circle.prototype = {
@@ -4498,6 +4472,20 @@ Kinetic.Circle.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
+    },
+    getWidth: function() {
+        return this.getRadius() * 2;
+    },
+    getHeight: function() {
+        return this.getRadius() * 2;
+    },
+    setWidth: function(width) {
+        Kinetic.Node.prototype.setWidth.call(this, width);
+        this.setRadius(width / 2);
+    },
+    setHeight: function(height) {
+        Kinetic.Node.prototype.setHeight.call(this, height);
+        this.setRadius(height / 2);
     }
 };
 Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
@@ -4573,6 +4561,24 @@ Kinetic.Ellipse.prototype = {
     setRadius: function() {
         var pos = Kinetic.Type._getXY([].slice.call(arguments));
         this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
+    },
+    getWidth: function() {
+        return this.getRadius().x * 2;
+    },
+    getHeight: function() {
+        return this.getRadius().y * 2;
+    },
+    setWidth: function(width) {
+        Kinetic.Node.prototype.setWidth.call(this, width);
+        this.setRadius({
+            x: width / 2
+        });
+    },
+    setHeight: function(height) {
+        Kinetic.Node.prototype.setHeight.call(this, height);
+        this.setRadius({
+            y: height / 2
+        });
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
@@ -4743,23 +4749,9 @@ Kinetic.Image.prototype = {
 Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter', 'width', 'height']);
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
 Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
 
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Image.prototype
- * @param {Number} width
- */
-
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Image.prototype
- * @param {Number} height
- */
-
 /**
  * set image
  * @name setImage
@@ -4791,18 +4783,6 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
  * @name getFilter
  * @methodOf Kinetic.Image.prototype
  */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Image.prototype
- */
 ///////////////////////////////////////////////////////////////////////
 //  Polygon
 ///////////////////////////////////////////////////////////////////////
@@ -5094,7 +5074,7 @@ Kinetic.Text.prototype = {
 Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'width', 'height']);
+Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);
 Kinetic.Node.addGetters(Kinetic.Text, ['text']);
 /**
  * set font family
@@ -5159,20 +5139,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * @param {Number} lineHeight default is 1.2
  */
 
-/**
- * set width of text box
- * @name setWidth
- * @methodOf Kinetic.Text.prototype
- * @param {Number} width
- */
-
-/**
- * set height of text box
- * @name setHeight
- * @methodOf Kinetic.Text.prototype
- * @param {Number} height
- */
-
 /**
  * set shadow of text or textbox
  * @name setShadow
@@ -5240,18 +5206,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * @methodOf Kinetic.Text.prototype
  */
 
-/**
- * get width of text box
- * @name getWidth
- * @methodOf Kinetic.Text.prototype
- */
-
-/**
- * get height of text box
- * @name getHeight
- * @methodOf Kinetic.Text.prototype
- */
-
 /**
  * get shadow of text or textbox
  * @name getShadow

src/Node.js

@@ -304,7 +304,6 @@ Kinetic.Node.prototype = {
                 addChildren(nodes);
             }
         }
-
         if(that.nodeType !== 'Stage') {
             addChildren(that.getStage().getChildren());
         }
@@ -519,7 +518,7 @@ Kinetic.Node.prototype = {
      */
     getAbsoluteOpacity: function() {
         var absOpacity = this.getOpacity();
-        if (this.getParent()) {
+        if(this.getParent()) {
             absOpacity *= this.getParent().getAbsoluteOpacity();
         }
         return absOpacity;
@@ -835,6 +834,46 @@ Kinetic.Node.prototype = {
         this.setAttr('scale', pos);
 
     },
+    /**
+     * set size
+     * @name setSize
+     * @methodOf Kinetic.Node.prototype
+     * @param {Number} width
+     * @param {Number} height
+     */
+    setSize: function() {
+        // set stage dimensions
+        var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
+        this.setWidth(size.width);
+        this.setHeight(size.height);
+    },
+    /**
+     * get size
+     * @name getSize
+     * @methodOf Kinetic.Node.prototype
+     */
+    getSize: function() {
+        return {
+            width: this.getWidth(),
+            height: this.getHeight()
+        };
+    },
+    /**
+     * get width
+     * @name getWidth
+     * @methodOf Kinetic.Node.prototype
+     */
+    getWidth: function() {
+        return this.attrs.width || 0;
+    },
+    /**
+     * get height
+     * @name getHeight
+     * @methodOf Kinetic.Node.prototype
+     */
+    getHeight: function() {
+        return this.attrs.height || 0;
+    },
     _get: function(selector) {
         return this.nodeType === selector ? [this] : [];
     },
@@ -1086,12 +1125,12 @@ Kinetic.Node._createNode = function(obj, container) {
     else {
         type = obj.nodeType;
     }
-    
+
     // if container was passed in, add it to attrs
-    if (container) {
+    if(container) {
-    	obj.attrs.container = container;
+        obj.attrs.container = container;
     }
-    
+
     var no = new Kinetic[type](obj.attrs);
     if(obj.children) {
         for(var n = 0; n < obj.children.length; n++) {
@@ -1104,6 +1143,7 @@ Kinetic.Node._createNode = function(obj, container) {
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
+Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
 
 // mappings
 /**
@@ -1197,6 +1237,20 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {Boolean} listening
  */
 
+/**
+ * set width
+ * @name setWidth
+ * @methodOf Kinetic.Node.prototype
+ * @param {Number} width
+ */
+
+/**
+ * set height
+ * @name setHeight
+ * @methodOf Kinetic.Node.prototype
+ * @param {Number} height
+ */
+
 /**
  * get scale
  * @name getScale
@@ -1267,4 +1321,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * determine if listening to events or not
  * @name getListening
  * @methodOf Kinetic.Node.prototype
- */
+ */

src/Stage.js

@@ -70,19 +70,6 @@ Kinetic.Stage.prototype = {
     draw: function() {
         this._draw();
     },
-    /**
-     * set stage size
-     * @name setSize
-     * @methodOf Kinetic.Stage.prototype
-     * @param {Number} width
-     * @param {Number} height
-     */
-    setSize: function() {
-        // set stage dimensions
-        var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
-        this.setWidth(size.width);
-        this.setHeight(size.height);
-    },
     /**
      * set height
      * @name setHeight
@@ -90,7 +77,7 @@ Kinetic.Stage.prototype = {
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.setAttr('height', height);
+        Kinetic.Node.prototype.setHeight.call(this, height);
         this._resizeDOM();
     },
     /**
@@ -100,20 +87,9 @@ Kinetic.Stage.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.setAttr('width', width);
+        Kinetic.Node.prototype.setWidth.call(this, width);
         this._resizeDOM();
     },
-    /**
-     * get stage size
-     * @name getSize
-     * @methodOf Kinetic.Stage.prototype
-     */
-    getSize: function() {
-        return {
-            width: this.attrs.width,
-            height: this.attrs.height
-        };
-    },
     /**
      * clear all layers
      * @name clear
@@ -233,7 +209,6 @@ Kinetic.Stage.prototype = {
             };
             imageObj.src = layerUrl;
         }
-
         drawLayer(0);
     },
     /**
@@ -714,22 +689,10 @@ Kinetic.Stage.prototype = {
 Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
 
 // add getters and setters
-Kinetic.Node.addGetters(Kinetic.Stage, ['width', 'height', 'container']);
+Kinetic.Node.addGetters(Kinetic.Stage, ['container']);
 
 /**
  * get container DOM element
  * @name getContainer
  * @methodOf Kinetic.Stage.prototype
- */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Stage.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Stage.prototype
  */

src/shapes/Circle.js

@@ -8,7 +8,7 @@
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
-	this._initCircle(config);	
+    this._initCircle(config);
 };
 
 Kinetic.Circle.prototype = {
@@ -29,6 +29,20 @@ Kinetic.Circle.prototype = {
         context.closePath();
         this.fill(context);
         this.stroke(context);
+    },
+    getWidth: function() {
+        return this.getRadius() * 2;
+    },
+    getHeight: function() {
+        return this.getRadius() * 2;
+    },
+    setWidth: function(width) {
+        Kinetic.Node.prototype.setWidth.call(this, width);
+        this.setRadius(width / 2);
+    },
+    setHeight: function(height) {
+        Kinetic.Node.prototype.setHeight.call(this, height);
+        this.setRadius(height / 2);
     }
 };
 Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);

src/shapes/Ellipse.js

@@ -54,6 +54,24 @@ Kinetic.Ellipse.prototype = {
     setRadius: function() {
         var pos = Kinetic.Type._getXY([].slice.call(arguments));
         this.setAttr('radius', Kinetic.Type._merge(pos, this.getRadius()));
+    },
+    getWidth: function() {
+        return this.getRadius().x * 2;
+    },
+    getHeight: function() {
+        return this.getRadius().y * 2;
+    },
+    setWidth: function(width) {
+        Kinetic.Node.prototype.setWidth.call(this, width);
+        this.setRadius({
+            x: width / 2
+        });
+    },
+    setHeight: function(height) {
+        Kinetic.Node.prototype.setHeight.call(this, height);
+        this.setRadius({
+            y: height / 2
+        });
     }
 };
 Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);

src/shapes/Image.js

@@ -156,23 +156,9 @@ Kinetic.Image.prototype = {
 Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter', 'width', 'height']);
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'filter']);
 Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
 
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Image.prototype
- * @param {Number} width
- */
-
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Image.prototype
- * @param {Number} height
- */
-
 /**
  * set image
  * @name setImage
@@ -203,16 +189,4 @@ Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
  * get filter
  * @name getFilter
  * @methodOf Kinetic.Image.prototype
- */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Image.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Image.prototype
  */

src/shapes/Rect.js

@@ -46,46 +46,4 @@ Kinetic.Rect.prototype = {
         this.stroke(context);
     }
 };
-Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
+Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
-
-// add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height']);
-
-/**
- * set width
- * @name setWidth
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} width
- */
-
-/**
- * set height
- * @name setHeight
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} height
- */
-
-/**
- * set corner radius
- * @name setCornerRadius
- * @methodOf Kinetic.Rect.prototype
- * @param {Number} radius
- */
-
-/**
- * get width
- * @name getWidth
- * @methodOf Kinetic.Rect.prototype
- */
-
-/**
- * get height
- * @name getHeight
- * @methodOf Kinetic.Rect.prototype
- */
-
-/**
- * get corner radius
- * @name getCornerRadius
- * @methodOf Kinetic.Rect.prototype
- */

src/shapes/Text.js

@@ -236,7 +236,7 @@ Kinetic.Text.prototype = {
 Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'width', 'height']);
+Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight']);
 Kinetic.Node.addGetters(Kinetic.Text, ['text']);
 /**
  * set font family
@@ -301,20 +301,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * @param {Number} lineHeight default is 1.2
  */
 
-/**
- * set width of text box
- * @name setWidth
- * @methodOf Kinetic.Text.prototype
- * @param {Number} width
- */
-
-/**
- * set height of text box
- * @name setHeight
- * @methodOf Kinetic.Text.prototype
- * @param {Number} height
- */
-
 /**
  * set shadow of text or textbox
  * @name setShadow
@@ -382,18 +368,6 @@ Kinetic.Node.addGetters(Kinetic.Text, ['text']);
  * @methodOf Kinetic.Text.prototype
  */
 
-/**
- * get width of text box
- * @name getWidth
- * @methodOf Kinetic.Text.prototype
- */
-
-/**
- * get height of text box
- * @name getHeight
- * @methodOf Kinetic.Text.prototype
- */
-
 /**
  * get shadow of text or textbox
  * @name getShadow

tests/js/unitTests.js

@@ -2853,6 +2853,74 @@ Test.prototype.tests = {
 
         //layer.setListening(false);
         layer.drawBuffer();
+    },
+	'SHAPE - test size setters and getters': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 50,
+            fill: 'red'
+        });
+        
+        var ellipse = new Kinetic.Ellipse({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: {
+            	x: 100,
+            	y: 50
+            },
+            fill: 'yellow'
+        });
+
+		layer.add(ellipse);
+		layer.add(circle);
+		stage.add(layer);
+		
+		// circle tests
+		test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
+		test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
+		test(circle.getWidth() === 100, 'circle width should be 100');
+		test(circle.getHeight() === 100, 'circle height should be 100');
+		test(circle.getSize().width === 100, 'circle width should be 100');
+		test(circle.getSize().height === 100, 'circle height should be 100');
+		test(circle.getRadius() === 50, 'circle radius should be 50');
+		
+		circle.setWidth(200);
+		
+		test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
+		test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
+		test(circle.getWidth() === 200, 'circle width should be 200');
+		test(circle.getHeight() === 200, 'circle height should be 200');
+		test(circle.getSize().width === 200, 'circle width should be 200');
+		test(circle.getSize().height === 200, 'circle height should be 200');
+		test(circle.getRadius() === 100, 'circle radius should be 100');
+		
+		// ellipse tests
+		test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
+		test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
+		test(ellipse.getWidth() === 200, 'ellipse width should be 200');
+		test(ellipse.getHeight() === 100, 'ellipse height should be 100');
+		test(ellipse.getSize().width === 200, 'ellipse width should be 200');
+		test(ellipse.getSize().height === 100, 'ellipse height should be 100');
+		test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
+		
+		ellipse.setWidth(400);
+		
+		test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
+		test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
+		test(ellipse.getWidth() === 400, 'ellipse width should be 400');
+		test(ellipse.getHeight() === 100, 'ellipse height should be 100');
+		test(ellipse.getSize().width === 400, 'ellipse width should be 400');
+		test(ellipse.getSize().height === 100, 'ellipse height should be 100');
+		test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
+		
     },
     'SHAPE - text multi line': function(containerId) {
         var stage = new Kinetic.Stage({