diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js
index 4d64b585..72b3b5af 100644
--- a/dist/kinetic-core.js
+++ b/dist/kinetic-core.js
@@ -160,25 +160,30 @@ window.requestAnimFrame = (function(callback) {
  * @param {Object} config
  */
 Kinetic.Node = function(config) {
-    this.visible = true;
-    this._listening = true;
-    this.name = undefined;
-    this.alpha = 1;
-    this.x = 0;
-    this.y = 0;
-    this.scale = {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.visible = true;
+    this.attrs.listening = true;
+    this.attrs.name = undefined;
+    this.attrs.alpha = 1;
+    this.attrs.x = 0;
+    this.attrs.y = 0;
+    this.attrs.scale = {
         x: 1,
         y: 1
     };
-    this.rotation = 0;
-    this.centerOffset = {
+    this.attrs.rotation = 0;
+    this.attrs.centerOffset = {
         x: 0,
         y: 0
     };
+    this.attrs.dragConstraint = 'none';
+    this.attrs.dragBounds = {};
+    this.attrs.draggable = false;
+
     this.eventListeners = {};
-    this.dragConstraint = 'none';
-    this.dragBounds = {};
-    this._draggable = false;
 
     // set properties from config
     if(config) {
@@ -192,25 +197,26 @@ Kinetic.Node = function(config) {
                     this.listen(config[key]);
                     break;
                 case 'rotationDeg':
-                    this.rotation = config[key] * Math.PI / 180;
+                    this.attrs.rotation = config[key] * Math.PI / 180;
+                    break;
+                case 'drawFunc':
+                    break;
+                case 'image':
                     break;
                 default:
-                    this[key] = config[key];
+                    this.attrs[key] = config[key];
                     break;
             }
         }
     }
 
     // overrides
-    if(this.centerOffset.x === undefined) {
-        this.centerOffset.x = 0;
+    if(this.attrs.centerOffset.x === undefined) {
+        this.attrs.centerOffset.x = 0;
     }
-    if(this.centerOffset.y === undefined) {
-        this.centerOffset.y = 0;
+    if(this.attrs.centerOffset.y === undefined) {
+        this.attrs.centerOffset.y = 0;
     }
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['alpha', 'centerOffset', 'dragBounds', 'dragConstraint', '_draggable', '_listening', 'name', 'nodeType', 'rotation', 'scale', 'visible', 'x', 'y']);
 };
 /*
  * Node methods
@@ -289,13 +295,13 @@ Kinetic.Node.prototype = {
      * show node
      */
     show: function() {
-        this.visible = true;
+        this.attrs.visible = true;
     },
     /**
      * hide node
      */
     hide: function() {
-        this.visible = false;
+        this.attrs.visible = false;
     },
     /**
      * get zIndex
@@ -357,19 +363,19 @@ Kinetic.Node.prototype = {
      */
     setScale: function(scaleX, scaleY) {
         if(scaleY) {
-            this.scale.x = scaleX;
-            this.scale.y = scaleY;
+            this.attrs.scale.x = scaleX;
+            this.attrs.scale.y = scaleY;
         }
         else {
-            this.scale.x = scaleX;
-            this.scale.y = scaleX;
+            this.attrs.scale.x = scaleX;
+            this.attrs.scale.y = scaleX;
         }
     },
     /**
      * get scale
      */
     getScale: function() {
-        return this.scale;
+        return this.attrs.scale;
     },
     /**
      * set node position
@@ -377,16 +383,16 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     setPosition: function(x, y) {
-        this.x = x;
-        this.y = y;
+        this.attrs.x = x;
+        this.attrs.y = y;
     },
     /**
      * get node position relative to container
      */
     getPosition: function() {
         return {
-            x: this.x,
-            y: this.y
+            x: this.attrs.x,
+            y: this.attrs.y
         };
     },
     /**
@@ -401,55 +407,55 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     move: function(x, y) {
-        this.x += x;
-        this.y += y;
+        this.attrs.x += x;
+        this.attrs.y += y;
     },
     /**
      * set node rotation in radians
      * @param {Number} theta
      */
     setRotation: function(theta) {
-        this.rotation = theta;
+        this.attrs.rotation = theta;
     },
     /**
      * set node rotation in degrees
      * @param {Number} deg
      */
     setRotationDeg: function(deg) {
-        this.rotation = (deg * Math.PI / 180);
+        this.attrs.rotation = (deg * Math.PI / 180);
     },
     /**
      * get rotation in radians
      */
     getRotation: function() {
-        return this.rotation;
+        return this.attrs.rotation;
     },
     /**
      * get rotation in degrees
      */
     getRotationDeg: function() {
-        return this.rotation * 180 / Math.PI;
+        return this.attrs.rotation * 180 / Math.PI;
     },
     /**
      * rotate node by an amount in radians
      * @param {Number} theta
      */
     rotate: function(theta) {
-        this.rotation += theta;
+        this.attrs.rotation += theta;
     },
     /**
      * rotate node by an amount in degrees
      * @param {Number} deg
      */
     rotateDeg: function(deg) {
-        this.rotation += (deg * Math.PI / 180);
+        this.attrs.rotation += (deg * Math.PI / 180);
     },
     /**
      * listen or don't listen to events
      * @param {Boolean} listening
      */
     listen: function(listening) {
-        this._listening = listening;
+        this.attrs.listening = listening;
     },
     /**
      * move node to top
@@ -506,7 +512,7 @@ Kinetic.Node.prototype = {
      * @param {Object} alpha
      */
     setAlpha: function(alpha) {
-        this.alpha = alpha;
+        this.attrs.alpha = alpha;
     },
     /**
      * get alpha.  Alpha values range from 0 to 1.
@@ -514,7 +520,7 @@ Kinetic.Node.prototype = {
      * with an alpha of 1 is fully opaque
      */
     getAlpha: function() {
-        return this.alpha;
+        return this.attrs.alpha;
     },
     /**
      * get absolute alpha
@@ -524,7 +530,7 @@ Kinetic.Node.prototype = {
         var node = this;
         // traverse upwards
         while(node.nodeType !== 'Stage') {
-            absAlpha *= node.alpha;
+            absAlpha *= node.attrs.alpha;
             node = node.parent;
         }
         return absAlpha;
@@ -534,14 +540,14 @@ Kinetic.Node.prototype = {
      * @param {Boolean} isDraggable
      */
     draggable: function(isDraggable) {
-        if(this.draggable !== isDraggable) {
+        if(this.attrs.draggable !== isDraggable) {
             if(isDraggable) {
                 this._initDrag();
             }
             else {
                 this._dragCleanup();
             }
-            this._draggable = isDraggable;
+            this.attrs.draggable = isDraggable;
         }
     },
     /**
@@ -568,9 +574,9 @@ Kinetic.Node.prototype = {
         newContainer._setChildrenIndices();
 
         // update children hashes
-        if(this.name) {
-            parent.childrenNames[this.name] = undefined;
-            newContainer.childrenNames[this.name] = this;
+        if(this.attrs.name) {
+            parent.childrenNames[this.attrs.name] = undefined;
+            newContainer.childrenNames[this.attrs.name] = this;
         }
     },
     /**
@@ -605,7 +611,7 @@ Kinetic.Node.prototype = {
      * get name
      */
     getName: function() {
-        return this.name;
+        return this.attrs.name;
     },
     /**
      * set center offset
@@ -613,14 +619,14 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     setCenterOffset: function(x, y) {
-        this.centerOffset.x = x;
-        this.centerOffset.y = y;
+        this.attrs.centerOffset.x = x;
+        this.attrs.centerOffset.y = y;
     },
     /**
      * get center offset
      */
     getCenterOffset: function() {
-        return this.centerOffset;
+        return this.attrs.centerOffset;
     },
     /**
      * transition node to another state.  Any property that can accept a real
@@ -673,13 +679,13 @@ Kinetic.Node.prototype = {
      * @param {String} constraint
      */
     setDragConstraint: function(constraint) {
-        this.dragConstraint = constraint;
+        this.attrs.dragConstraint = constraint;
     },
     /**
      * get drag constraint
      */
     getDragConstraint: function() {
-        return this.dragConstraint;
+        return this.attrs.dragConstraint;
     },
     /**
      * set drag bounds
@@ -690,13 +696,13 @@ Kinetic.Node.prototype = {
      * @config {Number} [bottom] bottom bounds position
      */
     setDragBounds: function(bounds) {
-        this.dragBounds = bounds;
+        this.attrs.dragBounds = bounds;
     },
     /**
      * get drag bounds
      */
     getDragBounds: function() {
-        return this.dragBounds;
+        return this.attrs.dragBounds;
     },
     /**
      * get transform of the node while taking into
@@ -730,17 +736,17 @@ Kinetic.Node.prototype = {
     getTransform: function() {
         var m = new Kinetic.Transform();
 
-        if(this.x !== 0 || this.y !== 0) {
-            m.translate(this.x, this.y);
+        if(this.attrs.x !== 0 || this.attrs.y !== 0) {
+            m.translate(this.attrs.x, this.attrs.y);
         }
-        if(this.rotation !== 0) {
-            m.rotate(this.rotation);
+        if(this.attrs.rotation !== 0) {
+            m.rotate(this.attrs.rotation);
         }
-        if(this.scale.x !== 1 || this.scale.y !== 1) {
-            m.scale(this.scale.x, this.scale.y);
+        if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
+            m.scale(this.attrs.scale.x, this.attrs.scale.y);
         }
-        if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) {
-            m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y);
+        if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
+            m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
         }
 
         return m;
@@ -865,8 +871,8 @@ Kinetic.Container.prototype = {
      */
     _remove: function(child) {
         if(this.children[child.index].id == child.id) {
-            if(child.name !== undefined) {
-                this.childrenNames[child.name] = undefined;
+            if(child.attrs.name !== undefined) {
+                this.childrenNames[child.attrs.name] = undefined;
             }
 
             this.children.splice(child.index, 1);
@@ -894,8 +900,8 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     _add: function(child) {
-        if(child.name) {
-            this.childrenNames[child.name] = child;
+        if(child.attrs.name) {
+            this.childrenNames[child.attrs.name] = child;
         }
         child.id = Kinetic.GlobalObject.idCounter++;
         child.index = this.children.length;
@@ -946,6 +952,13 @@ Kinetic.Container.prototype = {
  * @param {int} height
  */
 Kinetic.Stage = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 400;
+    this.attrs.height = 200;
+
     /*
      * if container is a string, assume it's an id for
      * a DOM element
@@ -957,13 +970,6 @@ Kinetic.Stage = function(config) {
     this.nodeType = 'Stage';
     this.container = config.container;
     this.content = document.createElement('div');
-
-    this.width = config.width;
-    this.height = config.height;
-    this.scale = {
-        x: 1,
-        y: 1
-    };
     this.dblClickWindow = 400;
     this.clickStart = false;
     this.targetShape = undefined;
@@ -993,9 +999,6 @@ Kinetic.Stage = function(config) {
     // add stage to global object
     Kinetic.GlobalObject.stages.push(this);
 
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['height', 'width']);
-
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -1051,8 +1054,8 @@ Kinetic.Stage.prototype = {
         }
 
         // set stage dimensions
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
 
         // set buffer layer and path layer sizes
         this.bufferLayer.getCanvas().width = width;
@@ -1065,8 +1068,8 @@ Kinetic.Stage.prototype = {
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     },
     /**
@@ -1228,11 +1231,11 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     add: function(layer) {
-        if(layer.name) {
-            this.childrenNames[layer.name] = layer;
+        if(layer.attrs.name) {
+            this.childrenNames[layer.attrs.name] = layer;
         }
-        layer.canvas.width = this.width;
-        layer.canvas.height = this.height;
+        layer.canvas.width = this.attrs.width;
+        layer.canvas.height = this.attrs.height;
         this._add(layer);
 
         // draw layer and append canvas to container
@@ -1278,6 +1281,18 @@ Kinetic.Stage.prototype = {
     getStage: function() {
         return this;
     },
+    /**
+     * get width
+     */
+    getWidth: function() {
+        return this.attrs.width;
+    },
+    /**
+     * get height
+     */
+    getHeight: function() {
+        return this.attrs.height;
+    },
     /**
      * detect event
      * @param {Shape} shape
@@ -1292,7 +1307,7 @@ Kinetic.Stage.prototype = {
             this.targetFound = true;
         }
 
-        if(shape.visible && pos !== undefined && shape._isPointInShape(pos)) {
+        if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
             // handle onmousedown
             if(!isDragging && this.mouseDown) {
                 this.mouseDown = false;
@@ -1428,7 +1443,7 @@ Kinetic.Stage.prototype = {
         // propapgate backwards through children
         for(var i = children.length - 1; i >= 0; i--) {
             var child = children[i];
-            if(child._listening) {
+            if(child.attrs.listening) {
                 if(child.nodeType === 'Shape') {
                     var exit = this._detectEvent(child, evt);
                     if(exit) {
@@ -1469,7 +1484,7 @@ Kinetic.Stage.prototype = {
         var shapeDetected = false;
         for(var n = this.children.length - 1; n >= 0; n--) {
             var layer = this.children[n];
-            if(layer.visible && n >= 0 && layer._listening) {
+            if(layer.attrs.visible && n >= 0 && layer.attrs.listening) {
                 if(this._traverseChildren(layer, evt)) {
                     n = -1;
                     shapeDetected = true;
@@ -1637,13 +1652,13 @@ Kinetic.Stage.prototype = {
             var node = go.drag.node;
             if(node) {
                 var pos = that.getUserPosition();
-                var dc = node.dragConstraint;
-                var db = node.dragBounds;
+                var dc = node.attrs.dragConstraint;
+                var db = node.attrs.dragBounds;
 
                 // default
                 var newNodePos = {
-                    x: pos.x - go.drag.offset.x,
-                    y: pos.y - go.drag.offset.y
+                    x: pos.attrs.x - go.drag.offset.x,
+                    y: pos.attrs.y - go.drag.offset.y
                 };
 
                 // bounds overrides
@@ -1664,13 +1679,13 @@ Kinetic.Stage.prototype = {
                  * save rotation and scale and then
                  * remove them from the transform
                  */
-                var rot = node.rotation;
+                var rot = node.attrs.rotation;
                 var scale = {
-                    x: node.scale.x,
-                    y: node.scale.y
+                    x: node.attrs.scale.x,
+                    y: node.attrs.scale.y
                 };
-                node.rotation = 0;
-                node.scale = {
+                node.attrs.rotation = 0;
+                node.attrs.scale = {
                     x: 1,
                     y: 1
                 };
@@ -1680,23 +1695,23 @@ Kinetic.Stage.prototype = {
                 it.invert();
                 it.translate(newNodePos.x, newNodePos.y);
                 newNodePos = {
-                    x: node.x + it.getTranslation().x,
-                    y: node.y + it.getTranslation().y
+                    x: node.attrs.x + it.getTranslation().x,
+                    y: node.attrs.y + it.getTranslation().y
                 };
 
                 // constraint overrides
                 if(dc === 'horizontal') {
-                    newNodePos.y = node.y;
+                    newNodePos.y = node.attrs.y;
                 }
                 else if(dc === 'vertical') {
-                    newNodePos.x = node.x;
+                    newNodePos.x = node.attrs.x;
                 }
 
                 node.setPosition(newNodePos.x, newNodePos.y);
 
                 // restore rotation and scale
                 node.rotate(rot);
-                node.scale = {
+                node.attrs.scale = {
                     x: scale.x,
                     y: scale.y
                 };
@@ -1723,8 +1738,8 @@ Kinetic.Stage.prototype = {
      */
     _buildDOM: function() {
         // content
-        this.content.style.width = this.width + 'px';
-        this.content.style.height = this.height + 'px';
+        this.content.style.width = this.attrs.width + 'px';
+        this.content.style.height = this.attrs.height + 'px';
         this.content.style.position = 'relative';
         this.content.style.display = 'inline-block';
         this.content.className = 'kineticjs-content';
@@ -1750,14 +1765,14 @@ Kinetic.Stage.prototype = {
         this.pathLayer.getCanvas().style.display = 'none';
 
         // add buffer layer
-        this.bufferLayer.canvas.width = this.width;
-        this.bufferLayer.canvas.height = this.height;
+        this.bufferLayer.canvas.width = this.attrs.width;
+        this.bufferLayer.canvas.height = this.attrs.height;
         this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
         this.content.appendChild(this.bufferLayer.canvas);
 
         // add path layer
-        this.pathLayer.canvas.width = this.width;
-        this.pathLayer.canvas.height = this.height;
+        this.pathLayer.canvas.width = this.attrs.width;
+        this.pathLayer.canvas.height = this.attrs.height;
         this.pathLayer.canvas.className = 'kineticjs-path-layer';
         this.content.appendChild(this.pathLayer.canvas);
     }
@@ -1783,9 +1798,6 @@ Kinetic.Layer = function(config) {
     this.context = this.canvas.getContext('2d');
     this.canvas.style.position = 'absolute';
 
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, []);
-
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -1844,7 +1856,7 @@ Kinetic.Layer.prototype = {
      */
     _draw: function() {
         this.clear();
-        if(this.visible) {
+        if(this.attrs.visible) {
             this._drawChildren();
         }
     }
@@ -1866,10 +1878,7 @@ Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node);
  */
 Kinetic.Group = function(config) {
     this.nodeType = 'Group';
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, []);
-
+    
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -1896,7 +1905,7 @@ Kinetic.Group.prototype = {
      * draw children
      */
     _draw: function() {
-        if(this.visible) {
+        if(this.attrs.visible) {
             this._drawChildren();
         }
     }
@@ -1924,6 +1933,20 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
  *  The default is "path" because it performs better
  */
 Kinetic.Shape = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.fill = undefined;
+    this.attrs.stroke = undefined;
+    this.attrs.strokeWidth = undefined;
+    this.attrs.lineJoin = undefined;
+    this.attrs.detectionType = 'path';
+    this.attrs.drawFuncName = undefined;
+
+    // special
+    this.drawFunc = config.drawFunc;
+
     this.nodeType = 'Shape';
     this.data = [];
 
@@ -1937,14 +1960,6 @@ Kinetic.Shape = function(config) {
         }
     }
 
-    this.detectionType = 'path';
-
-    // required
-    this.drawFunc = config.drawFunc;
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['fill', 'stroke', 'strokeWidth', 'detectionType', 'shapeType', 'drawFuncName']);
-
     // call super constructor
     Kinetic.Node.apply(this, [config]);
 };
@@ -1975,13 +1990,13 @@ Kinetic.Shape.prototype = {
     fillStroke: function() {
         var context = this.getContext();
 
-        if(this.fill !== undefined) {
-            context.fillStyle = this.fill;
+        if(this.attrs.fill !== undefined) {
+            context.fillStyle = this.attrs.fill;
             context.fill();
         }
-        if(this.stroke !== undefined) {
-            context.lineWidth = this.strokeWidth === undefined ? 1 : this.strokeWidth;
-            context.strokeStyle = this.stroke;
+        if(this.attrs.stroke !== undefined) {
+            context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
+            context.strokeStyle = this.attrs.stroke;
             context.stroke();
         }
     },
@@ -1991,8 +2006,8 @@ Kinetic.Shape.prototype = {
      */
     applyLineJoin: function() {
         var context = this.getContext();
-        if(this.lineJoin !== undefined) {
-            context.lineJoin = this.lineJoin;
+        if(this.attrs.lineJoin !== undefined) {
+            context.lineJoin = this.attrs.lineJoin;
         }
     },
     /**
@@ -2001,26 +2016,26 @@ Kinetic.Shape.prototype = {
      * @param {String|CanvasGradient|CanvasPattern} fill
      */
     setFill: function(fill) {
-        this.fill = fill;
+        this.attrs.fill = fill;
     },
     /**
      * get fill
      */
     getFill: function() {
-        return this.fill;
+        return this.attrs.fill;
     },
     /**
      * set stroke color
      * @param {String} stroke
      */
     setStroke: function(stroke) {
-        this.stroke = stroke;
+        this.attrs.stroke = stroke;
     },
     /**
      * get stroke color
      */
     getStroke: function() {
-        return this.stroke;
+        return this.attrs.stroke;
     },
     /**
      * set line join
@@ -2028,26 +2043,26 @@ Kinetic.Shape.prototype = {
      *  default is "miter"
      */
     setLineJoin: function(lineJoin) {
-        this.lineJoin = lineJoin;
+        this.attrs.lineJoin = lineJoin;
     },
     /**
      * get line join
      */
     getLineJoin: function() {
-        return this.lineJoin;
+        return this.attrs.lineJoin;
     },
     /**
      * set stroke width
      * @param {Number} strokeWidth
      */
     setStrokeWidth: function(strokeWidth) {
-        this.strokeWidth = strokeWidth;
+        this.attrs.strokeWidth = strokeWidth;
     },
     /**
      * get stroke width
      */
     getStrokeWidth: function() {
-        return this.strokeWidth;
+        return this.attrs.strokeWidth;
     },
     /**
      * set draw function
@@ -2061,8 +2076,8 @@ Kinetic.Shape.prototype = {
      */
     save: function() {
         var stage = this.getStage();
-        var w = stage.width;
-        var h = stage.height;
+        var w = stage.attrs.width;
+        var h = stage.attrs.height;
 
         var bufferLayer = stage.bufferLayer;
         var bufferLayerContext = bufferLayer.getContext();
@@ -2078,7 +2093,7 @@ Kinetic.Shape.prototype = {
      * @param {Layer} layer Layer that the shape will be drawn on
      */
     _draw: function(layer) {
-        if(this.visible) {
+        if(this.attrs.visible) {
             var stage = layer.getStage();
             var context = layer.getContext();
             var family = [];
@@ -2106,7 +2121,7 @@ Kinetic.Shape.prototype = {
         }
 
         // clear shape data
-        if(this.detectionType === 'pixel') {
+        if(this.attrs.detectionType === 'pixel') {
             this.data = [];
         }
     },
@@ -2117,7 +2132,7 @@ Kinetic.Shape.prototype = {
     _isPointInShape: function(pos) {
         var stage = this.getStage();
 
-        if(this.detectionType === 'path') {
+        if(this.attrs.detectionType === 'path') {
             var pathLayer = stage.pathLayer;
             var pathLayerContext = pathLayer.getContext();
 
@@ -2126,7 +2141,7 @@ Kinetic.Shape.prototype = {
             return pathLayerContext.isPointInPath(pos.x, pos.y);
         }
         else {
-            var w = stage.width;
+            var w = stage.attrs.width;
             var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
             return (alpha !== undefined && alpha !== 0);
         }
@@ -2145,13 +2160,20 @@ Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
  * @param {Object} config
  */
 Kinetic.Rect = function(config) {
-	this.shapeType = "Rect";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 0;
+    this.attrs.height = 0;
+
+    this.shapeType = "Rect";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.rect(0, 0, this.width, this.height);
+        context.rect(0, 0, this.attrs.width, this.attrs.height);
         context.closePath();
         this.fillStroke();
     };
@@ -2167,26 +2189,26 @@ Kinetic.Rect.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.width = width;
+        this.attrs.width = width;
     },
     /**
      * get width
      */
     getWidth: function() {
-        return this.width;
+        return this.attrs.width;
     },
     /**
      * set height
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.height = height;
+        this.attrs.height = height;
     },
     /**
      * get height
      */
     getHeight: function() {
-        return this.height;
+        return this.attrs.height;
     },
     /**
      * set width and height
@@ -2194,16 +2216,16 @@ Kinetic.Rect.prototype = {
      * @param {Number} height
      */
     setSize: function(width, height) {
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
     },
     /**
      * return rect size
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     }
 };
@@ -2221,6 +2243,12 @@ Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.radius = 0;
+
     this.shapeType = "Circle";
 
     config.drawFunc = function() {
@@ -2228,13 +2256,10 @@ Kinetic.Circle = function(config) {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
+        context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
         context.closePath();
         this.fillStroke();
     };
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['radius']);
-
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
 };
@@ -2247,13 +2272,13 @@ Kinetic.Circle.prototype = {
      * @param {Number} radius
      */
     setRadius: function(radius) {
-        this.radius = radius;
+        this.attrs.radius = radius;
     },
     /**
      * get radius
      */
     getRadius: function() {
-        return this.radius;
+        return this.attrs.radius;
     }
 };
 
@@ -2270,8 +2295,16 @@ Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
-	this.shapeType = "Image";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 0;
+    this.attrs.height = 0;
+
+    // special
+    this.image = config.image;
+
     // defaults
     if(config.width === undefined) {
         config.width = config.image.width;
@@ -2280,15 +2313,16 @@ Kinetic.Image = function(config) {
         config.height = config.image.height;
     }
 
+    this.shapeType = "Image";
     config.drawFunc = function() {
         var canvas = this.getCanvas();
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.rect(0, 0, this.width, this.height);
+        context.rect(0, 0, this.attrs.width, this.attrs.height);
         context.closePath();
         this.fillStroke();
-        context.drawImage(this.image, 0, 0, this.width, this.height);
+        context.drawImage(this.image, 0, 0, this.attrs.width, this.attrs.height);
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
@@ -2315,26 +2349,26 @@ Kinetic.Image.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.width = width;
+        this.attrs.width = width;
     },
     /**
      * get width
      */
     getWidth: function() {
-        return this.width;
+        return this.attrs.width;
     },
     /**
      * set height
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.height = height;
+        this.attrs.height = height;
     },
     /**
      * get height
      */
     getHeight: function() {
-        return this.height;
+        return this.attrs.height;
     },
     /**
      * set width and height
@@ -2342,16 +2376,16 @@ Kinetic.Image.prototype = {
      * @param {Number} height
      */
     setSize: function(width, height) {
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
     },
     /**
      * return image size
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     }
 };
@@ -2368,15 +2402,21 @@ Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Polygon = function(config) {
-	this.shapeType = "Polygon";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.points = {};
+
+    this.shapeType = "Polygon";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(this.points[0].x, this.points[0].y);
-        for(var n = 1; n < this.points.length; n++) {
-            context.lineTo(this.points[n].x, this.points[n].y);
+        context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
+        for(var n = 1; n < this.attrs.points.length; n++) {
+            context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
         }
         context.closePath();
         this.fillStroke();
@@ -2393,13 +2433,13 @@ Kinetic.Polygon.prototype = {
      * @param {Array} points
      */
     setPoints: function(points) {
-        this.points = points;
+        this.attrs.points = points;
     },
     /**
      * get points array
      */
     getPoints: function() {
-        return this.points;
+        return this.attrs.points;
     }
 };
 
@@ -2416,17 +2456,24 @@ Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.RegularPolygon = function(config) {
-	this.shapeType = "RegularPolygon";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.radius = 0;
+    this.attrs.sides = 0;
+
+    this.shapeType = "RegularPolygon";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(0, 0 - this.radius);
+        context.moveTo(0, 0 - this.attrs.radius);
 
-        for(var n = 1; n < this.sides; n++) {
-            var x = this.radius * Math.sin(n * 2 * Math.PI / this.sides);
-            var y = -1 * this.radius * Math.cos(n * 2 * Math.PI / this.sides);
+        for(var n = 1; n < this.attrs.sides; n++) {
+            var x = this.attrs.radius * Math.sin(n * 2 * Math.PI / this.attrs.sides);
+            var y = -1 * this.attrs.radius * Math.cos(n * 2 * Math.PI / this.attrs.sides);
             context.lineTo(x, y);
         }
         context.closePath();
@@ -2439,44 +2486,31 @@ Kinetic.RegularPolygon = function(config) {
  * RegularPolygon methods
  */
 Kinetic.RegularPolygon.prototype = {
-    /**
-     * set number of points
-     * @param {int} points
-     */
-    setPoints: function(points) {
-        this.points = points;
-    },
-    /**
-     * get number of points
-     */
-    getPoints: function() {
-        return this.points;
-    },
     /**
      * set radius
      * @param {Number} radius
      */
     setRadius: function(radius) {
-        this.radius = radius;
+        this.attrs.radius = radius;
     },
     /**
      * get radius
      */
     getRadius: function() {
-        return this.radius;
+        return this.attrs.radius;
     },
     /**
      * set number of sides
      * @param {int} sides
      */
     setSides: function(sides) {
-        this.sides = sides;
+        this.attrs.sides = sides;
     },
     /**
      * get number of sides
      */
     getSides: function() {
-        return this.sides;
+        return this.attrs.sides;
     }
 };
 
@@ -2493,18 +2527,25 @@ Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Star = function(config) {
-	this.shapeType = "Star";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.points = [];
+    this.attrs.innerRadius = 0;
+    this.attrs.outerRadius = 0;
+
+    this.shapeType = "Star";
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(0, 0 - this.outerRadius);
+        context.moveTo(0, 0 - this.attrs.outerRadius);
 
-        for(var n = 1; n < this.points * 2; n++) {
-            var radius = n % 2 === 0 ? this.outerRadius : this.innerRadius;
-            var x = radius * Math.sin(n * Math.PI / this.points);
-            var y = -1 * radius * Math.cos(n * Math.PI / this.points);
+        for(var n = 1; n < this.attrs.points * 2; n++) {
+            var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
+            var x = radius * Math.sin(n * Math.PI / this.attrs.points);
+            var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points);
             context.lineTo(x, y);
         }
         context.closePath();
@@ -2522,39 +2563,39 @@ Kinetic.Star.prototype = {
      * @param {Array} points
      */
     setPoints: function(points) {
-        this.points = points;
+        this.attrs.points = points;
     },
     /**
      * get points array
      */
     getPoints: function() {
-        return this.points;
+        return this.attrs.points;
     },
     /**
      * set outer radius
      * @param {Number} radius
      */
     setOuterRadius: function(radius) {
-        this.outerRadius = radius;
+        this.attrs.outerRadius = radius;
     },
     /**
      * get outer radius
      */
     getOuterRadius: function() {
-        return this.outerRadius;
+        return this.attrs.outerRadius;
     },
     /**
      * set inner radius
      * @param {Number} radius
      */
     setInnerRadius: function(radius) {
-        this.innerRadius = radius;
+        this.attrs.innerRadius = radius;
     },
     /**
      * get inner radius
      */
     getInnerRadius: function() {
-        return this.innerRadius;
+        return this.attrs.innerRadius;
     }
 };
 // extend Shape
@@ -2570,10 +2611,24 @@ Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Text = function(config) {
-	this.shapeType = "Text";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.fontFamily = '';
+    this.attrs.text = '';
+    this.attrs.fontSize = 12;
+    this.attrs.textStroke = undefined;
+    this.attrs.textStrokeWidth = undefined;
+    this.attrs.align = 'left';
+    this.attrs.verticalAlign = 'top';
+    this.attrs.padding = 0;
+    this.attrs.fontStyle = 'normal';
+
+    this.shapeType = "Text";
+
     /*
-     * defaults
+     * special defaults
      */
     if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
         if(config.textStroke === undefined) {
@@ -2583,30 +2638,18 @@ Kinetic.Text = function(config) {
             config.textStrokeWidth = 2;
         }
     }
-    if(config.align === undefined) {
-        config.align = 'left';
-    }
-    if(config.verticalAlign === undefined) {
-        config.verticalAlign = 'top';
-    }
-    if(config.padding === undefined) {
-        config.padding = 0;
-    }
-    if(config.fontStyle === undefined) {
-        config.fontStyle = 'normal';
-    }
 
     config.drawFunc = function() {
         var context = this.getContext();
-        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
+        context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
         context.textBaseline = 'middle';
         var textHeight = this.getTextHeight();
         var textWidth = this.getTextWidth();
-        var p = this.padding;
+        var p = this.attrs.padding;
         var x = 0;
         var y = 0;
 
-        switch (this.align) {
+        switch (this.attrs.align) {
             case 'center':
                 x = textWidth / -2 - p;
                 break;
@@ -2615,7 +2658,7 @@ Kinetic.Text = function(config) {
                 break;
         }
 
-        switch (this.verticalAlign) {
+        switch (this.attrs.verticalAlign) {
             case 'middle':
                 y = textHeight / -2 - p;
                 break;
@@ -2637,21 +2680,21 @@ Kinetic.Text = function(config) {
         var ty = textHeight / 2 + p + y;
 
         // draw text
-        if(this.textFill !== undefined) {
-            context.fillStyle = this.textFill;
-            context.fillText(this.text, tx, ty);
+        if(this.attrs.textFill !== undefined) {
+            context.fillStyle = this.attrs.textFill;
+            context.fillText(this.attrs.text, tx, ty);
         }
-        if(this.textStroke !== undefined || this.textStrokeWidth !== undefined) {
+        if(this.attrs.textStroke !== undefined || this.attrs.textStrokeWidth !== undefined) {
             // defaults
-            if(this.textStroke === undefined) {
-                this.textStroke = 'black';
+            if(this.attrs.textStroke === undefined) {
+                this.attrs.textStroke = 'black';
             }
-            else if(this.textStrokeWidth === undefined) {
-                this.textStrokeWidth = 2;
+            else if(this.attrs.textStrokeWidth === undefined) {
+                this.attrs.textStrokeWidth = 2;
             }
-            context.lineWidth = this.textStrokeWidth;
-            context.strokeStyle = this.textStroke;
-            context.strokeText(this.text, tx, ty);
+            context.lineWidth = this.attrs.textStrokeWidth;
+            context.strokeStyle = this.attrs.textStroke;
+            context.strokeText(this.attrs.text, tx, ty);
         }
     };
     // call super constructor
@@ -2666,130 +2709,130 @@ Kinetic.Text.prototype = {
      * @param {String} fontFamily
      */
     setFontFamily: function(fontFamily) {
-        this.fontFamily = fontFamily;
+        this.attrs.fontFamily = fontFamily;
     },
     /**
      * get font family
      */
     getFontFamily: function() {
-        return this.fontFamily;
+        return this.attrs.fontFamily;
     },
     /**
      * set font size
      * @param {int} fontSize
      */
     setFontSize: function(fontSize) {
-        this.fontSize = fontSize;
+        this.attrs.fontSize = fontSize;
     },
     /**
      * get font size
      */
     getFontSize: function() {
-        return this.fontSize;
+        return this.attrs.fontSize;
     },
     /**
      * set font style.  Can be "normal", "italic", or "bold".  "normal" is the default.
      * @param {String} fontStyle
      */
     setFontStyle: function(fontStyle) {
-        this.fontStyle = fontStyle;
+        this.attrs.fontStyle = fontStyle;
     },
     /**
      * get font style
      */
     getFontStyle: function() {
-        return this.fontStyle;
+        return this.attrs.fontStyle;
     },
     /**
      * set text fill color
      * @param {String} textFill
      */
     setTextFill: function(textFill) {
-        this.textFill = textFill;
+        this.attrs.textFill = textFill;
     },
     /**
      * get text fill color
      */
     getTextFill: function() {
-        return this.textFill;
+        return this.attrs.textFill;
     },
     /**
      * set text stroke color
      * @param {String} textStroke
      */
     setTextStroke: function(textStroke) {
-        this.textStroke = textStroke;
+        this.attrs.textStroke = textStroke;
     },
     /**
      * get text stroke color
      */
     getTextStroke: function() {
-        return this.textStroke;
+        return this.attrs.textStroke;
     },
     /**
      * set text stroke width
      * @param {int} textStrokeWidth
      */
     setTextStrokeWidth: function(textStrokeWidth) {
-        this.textStrokeWidth = textStrokeWidth;
+        this.attrs.textStrokeWidth = textStrokeWidth;
     },
     /**
      * get text stroke width
      */
     getTextStrokeWidth: function() {
-        return this.textStrokeWidth;
+        return this.attrs.textStrokeWidth;
     },
     /**
      * set padding
      * @param {int} padding
      */
     setPadding: function(padding) {
-        this.padding = padding;
+        this.attrs.padding = padding;
     },
     /**
      * get padding
      */
     getPadding: function() {
-        return this.padding;
+        return this.attrs.padding;
     },
     /**
      * set horizontal align of text
      * @param {String} align align can be 'left', 'center', or 'right'
      */
     setAlign: function(align) {
-        this.align = align;
+        this.attrs.align = align;
     },
     /**
      * get horizontal align
      */
     getAlign: function() {
-        return this.align;
+        return this.attrs.align;
     },
     /**
      * set vertical align of text
      * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
      */
     setVerticalAlign: function(verticalAlign) {
-        this.verticalAlign = verticalAlign;
+        this.attrs.verticalAlign = verticalAlign;
     },
     /**
      * get vertical align
      */
     getVerticalAlign: function() {
-        return this.verticalAlign;
+        return this.attrs.verticalAlign;
     },
     /**
      * set text
      * @param {String} text
      */
     setText: function(text) {
-        this.text = text;
+        this.attrs.text = text;
     },
     /**
      * get text
      */
     getText: function() {
-        return this.text;
+        return this.attrs.text;
     },
     /**
      * get text width in pixels
@@ -2809,12 +2852,12 @@ Kinetic.Text.prototype = {
     getTextSize: function() {
         var context = this.getContext();
         context.save();
-        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
-        var metrics = context.measureText(this.text);
+        context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
+        var metrics = context.measureText(this.attrs.text);
         context.restore();
         return {
             width: metrics.width,
-            height: parseInt(this.fontSize, 10)
+            height: parseInt(this.attrs.fontSize, 10)
         };
     }
 };
diff --git a/src/Container.js b/src/Container.js
index 430eec10..ecaaa201 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -44,8 +44,8 @@ Kinetic.Container.prototype = {
      */
     _remove: function(child) {
         if(this.children[child.index].id == child.id) {
-            if(child.name !== undefined) {
-                this.childrenNames[child.name] = undefined;
+            if(child.attrs.name !== undefined) {
+                this.childrenNames[child.attrs.name] = undefined;
             }
 
             this.children.splice(child.index, 1);
@@ -73,8 +73,8 @@ Kinetic.Container.prototype = {
      * @param {Node} child
      */
     _add: function(child) {
-        if(child.name) {
-            this.childrenNames[child.name] = child;
+        if(child.attrs.name) {
+            this.childrenNames[child.attrs.name] = child;
         }
         child.id = Kinetic.GlobalObject.idCounter++;
         child.index = this.children.length;
diff --git a/src/Group.js b/src/Group.js
index d2514915..906a888b 100644
--- a/src/Group.js
+++ b/src/Group.js
@@ -11,10 +11,7 @@
  */
 Kinetic.Group = function(config) {
     this.nodeType = 'Group';
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, []);
-
+    
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -41,7 +38,7 @@ Kinetic.Group.prototype = {
      * draw children
      */
     _draw: function() {
-        if(this.visible) {
+        if(this.attrs.visible) {
             this._drawChildren();
         }
     }
diff --git a/src/Layer.js b/src/Layer.js
index d18fdab9..ab53c523 100644
--- a/src/Layer.js
+++ b/src/Layer.js
@@ -15,9 +15,6 @@ Kinetic.Layer = function(config) {
     this.context = this.canvas.getContext('2d');
     this.canvas.style.position = 'absolute';
 
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, []);
-
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -76,7 +73,7 @@ Kinetic.Layer.prototype = {
      */
     _draw: function() {
         this.clear();
-        if(this.visible) {
+        if(this.attrs.visible) {
             this._drawChildren();
         }
     }
diff --git a/src/Node.js b/src/Node.js
index 3f7a0b86..84f54cc1 100644
--- a/src/Node.js
+++ b/src/Node.js
@@ -9,25 +9,30 @@
  * @param {Object} config
  */
 Kinetic.Node = function(config) {
-    this.visible = true;
-    this._listening = true;
-    this.name = undefined;
-    this.alpha = 1;
-    this.x = 0;
-    this.y = 0;
-    this.scale = {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.visible = true;
+    this.attrs.listening = true;
+    this.attrs.name = undefined;
+    this.attrs.alpha = 1;
+    this.attrs.x = 0;
+    this.attrs.y = 0;
+    this.attrs.scale = {
         x: 1,
         y: 1
     };
-    this.rotation = 0;
-    this.centerOffset = {
+    this.attrs.rotation = 0;
+    this.attrs.centerOffset = {
         x: 0,
         y: 0
     };
+    this.attrs.dragConstraint = 'none';
+    this.attrs.dragBounds = {};
+    this.attrs.draggable = false;
+
     this.eventListeners = {};
-    this.dragConstraint = 'none';
-    this.dragBounds = {};
-    this._draggable = false;
 
     // set properties from config
     if(config) {
@@ -41,25 +46,26 @@ Kinetic.Node = function(config) {
                     this.listen(config[key]);
                     break;
                 case 'rotationDeg':
-                    this.rotation = config[key] * Math.PI / 180;
+                    this.attrs.rotation = config[key] * Math.PI / 180;
+                    break;
+                case 'drawFunc':
+                    break;
+                case 'image':
                     break;
                 default:
-                    this[key] = config[key];
+                    this.attrs[key] = config[key];
                     break;
             }
         }
     }
 
     // overrides
-    if(this.centerOffset.x === undefined) {
-        this.centerOffset.x = 0;
+    if(this.attrs.centerOffset.x === undefined) {
+        this.attrs.centerOffset.x = 0;
     }
-    if(this.centerOffset.y === undefined) {
-        this.centerOffset.y = 0;
+    if(this.attrs.centerOffset.y === undefined) {
+        this.attrs.centerOffset.y = 0;
     }
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['alpha', 'centerOffset', 'dragBounds', 'dragConstraint', '_draggable', '_listening', 'name', 'nodeType', 'rotation', 'scale', 'visible', 'x', 'y']);
 };
 /*
  * Node methods
@@ -138,13 +144,13 @@ Kinetic.Node.prototype = {
      * show node
      */
     show: function() {
-        this.visible = true;
+        this.attrs.visible = true;
     },
     /**
      * hide node
      */
     hide: function() {
-        this.visible = false;
+        this.attrs.visible = false;
     },
     /**
      * get zIndex
@@ -206,19 +212,19 @@ Kinetic.Node.prototype = {
      */
     setScale: function(scaleX, scaleY) {
         if(scaleY) {
-            this.scale.x = scaleX;
-            this.scale.y = scaleY;
+            this.attrs.scale.x = scaleX;
+            this.attrs.scale.y = scaleY;
         }
         else {
-            this.scale.x = scaleX;
-            this.scale.y = scaleX;
+            this.attrs.scale.x = scaleX;
+            this.attrs.scale.y = scaleX;
         }
     },
     /**
      * get scale
      */
     getScale: function() {
-        return this.scale;
+        return this.attrs.scale;
     },
     /**
      * set node position
@@ -226,16 +232,16 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     setPosition: function(x, y) {
-        this.x = x;
-        this.y = y;
+        this.attrs.x = x;
+        this.attrs.y = y;
     },
     /**
      * get node position relative to container
      */
     getPosition: function() {
         return {
-            x: this.x,
-            y: this.y
+            x: this.attrs.x,
+            y: this.attrs.y
         };
     },
     /**
@@ -250,55 +256,55 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     move: function(x, y) {
-        this.x += x;
-        this.y += y;
+        this.attrs.x += x;
+        this.attrs.y += y;
     },
     /**
      * set node rotation in radians
      * @param {Number} theta
      */
     setRotation: function(theta) {
-        this.rotation = theta;
+        this.attrs.rotation = theta;
     },
     /**
      * set node rotation in degrees
      * @param {Number} deg
      */
     setRotationDeg: function(deg) {
-        this.rotation = (deg * Math.PI / 180);
+        this.attrs.rotation = (deg * Math.PI / 180);
     },
     /**
      * get rotation in radians
      */
     getRotation: function() {
-        return this.rotation;
+        return this.attrs.rotation;
     },
     /**
      * get rotation in degrees
      */
     getRotationDeg: function() {
-        return this.rotation * 180 / Math.PI;
+        return this.attrs.rotation * 180 / Math.PI;
     },
     /**
      * rotate node by an amount in radians
      * @param {Number} theta
      */
     rotate: function(theta) {
-        this.rotation += theta;
+        this.attrs.rotation += theta;
     },
     /**
      * rotate node by an amount in degrees
      * @param {Number} deg
      */
     rotateDeg: function(deg) {
-        this.rotation += (deg * Math.PI / 180);
+        this.attrs.rotation += (deg * Math.PI / 180);
     },
     /**
      * listen or don't listen to events
      * @param {Boolean} listening
      */
     listen: function(listening) {
-        this._listening = listening;
+        this.attrs.listening = listening;
     },
     /**
      * move node to top
@@ -355,7 +361,7 @@ Kinetic.Node.prototype = {
      * @param {Object} alpha
      */
     setAlpha: function(alpha) {
-        this.alpha = alpha;
+        this.attrs.alpha = alpha;
     },
     /**
      * get alpha.  Alpha values range from 0 to 1.
@@ -363,7 +369,7 @@ Kinetic.Node.prototype = {
      * with an alpha of 1 is fully opaque
      */
     getAlpha: function() {
-        return this.alpha;
+        return this.attrs.alpha;
     },
     /**
      * get absolute alpha
@@ -373,7 +379,7 @@ Kinetic.Node.prototype = {
         var node = this;
         // traverse upwards
         while(node.nodeType !== 'Stage') {
-            absAlpha *= node.alpha;
+            absAlpha *= node.attrs.alpha;
             node = node.parent;
         }
         return absAlpha;
@@ -383,14 +389,14 @@ Kinetic.Node.prototype = {
      * @param {Boolean} isDraggable
      */
     draggable: function(isDraggable) {
-        if(this.draggable !== isDraggable) {
+        if(this.attrs.draggable !== isDraggable) {
             if(isDraggable) {
                 this._initDrag();
             }
             else {
                 this._dragCleanup();
             }
-            this._draggable = isDraggable;
+            this.attrs.draggable = isDraggable;
         }
     },
     /**
@@ -417,9 +423,9 @@ Kinetic.Node.prototype = {
         newContainer._setChildrenIndices();
 
         // update children hashes
-        if(this.name) {
-            parent.childrenNames[this.name] = undefined;
-            newContainer.childrenNames[this.name] = this;
+        if(this.attrs.name) {
+            parent.childrenNames[this.attrs.name] = undefined;
+            newContainer.childrenNames[this.attrs.name] = this;
         }
     },
     /**
@@ -454,7 +460,7 @@ Kinetic.Node.prototype = {
      * get name
      */
     getName: function() {
-        return this.name;
+        return this.attrs.name;
     },
     /**
      * set center offset
@@ -462,14 +468,14 @@ Kinetic.Node.prototype = {
      * @param {Number} y
      */
     setCenterOffset: function(x, y) {
-        this.centerOffset.x = x;
-        this.centerOffset.y = y;
+        this.attrs.centerOffset.x = x;
+        this.attrs.centerOffset.y = y;
     },
     /**
      * get center offset
      */
     getCenterOffset: function() {
-        return this.centerOffset;
+        return this.attrs.centerOffset;
     },
     /**
      * transition node to another state.  Any property that can accept a real
@@ -522,13 +528,13 @@ Kinetic.Node.prototype = {
      * @param {String} constraint
      */
     setDragConstraint: function(constraint) {
-        this.dragConstraint = constraint;
+        this.attrs.dragConstraint = constraint;
     },
     /**
      * get drag constraint
      */
     getDragConstraint: function() {
-        return this.dragConstraint;
+        return this.attrs.dragConstraint;
     },
     /**
      * set drag bounds
@@ -539,13 +545,13 @@ Kinetic.Node.prototype = {
      * @config {Number} [bottom] bottom bounds position
      */
     setDragBounds: function(bounds) {
-        this.dragBounds = bounds;
+        this.attrs.dragBounds = bounds;
     },
     /**
      * get drag bounds
      */
     getDragBounds: function() {
-        return this.dragBounds;
+        return this.attrs.dragBounds;
     },
     /**
      * get transform of the node while taking into
@@ -579,17 +585,17 @@ Kinetic.Node.prototype = {
     getTransform: function() {
         var m = new Kinetic.Transform();
 
-        if(this.x !== 0 || this.y !== 0) {
-            m.translate(this.x, this.y);
+        if(this.attrs.x !== 0 || this.attrs.y !== 0) {
+            m.translate(this.attrs.x, this.attrs.y);
         }
-        if(this.rotation !== 0) {
-            m.rotate(this.rotation);
+        if(this.attrs.rotation !== 0) {
+            m.rotate(this.attrs.rotation);
         }
-        if(this.scale.x !== 1 || this.scale.y !== 1) {
-            m.scale(this.scale.x, this.scale.y);
+        if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
+            m.scale(this.attrs.scale.x, this.attrs.scale.y);
         }
-        if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) {
-            m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y);
+        if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
+            m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
         }
 
         return m;
diff --git a/src/Shape.js b/src/Shape.js
index dac65dfa..4e1e63c4 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -16,6 +16,20 @@
  *  The default is "path" because it performs better
  */
 Kinetic.Shape = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.fill = undefined;
+    this.attrs.stroke = undefined;
+    this.attrs.strokeWidth = undefined;
+    this.attrs.lineJoin = undefined;
+    this.attrs.detectionType = 'path';
+    this.attrs.drawFuncName = undefined;
+
+    // special
+    this.drawFunc = config.drawFunc;
+
     this.nodeType = 'Shape';
     this.data = [];
 
@@ -29,14 +43,6 @@ Kinetic.Shape = function(config) {
         }
     }
 
-    this.detectionType = 'path';
-
-    // required
-    this.drawFunc = config.drawFunc;
-
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['fill', 'stroke', 'strokeWidth', 'detectionType', 'shapeType', 'drawFuncName']);
-
     // call super constructor
     Kinetic.Node.apply(this, [config]);
 };
@@ -67,13 +73,13 @@ Kinetic.Shape.prototype = {
     fillStroke: function() {
         var context = this.getContext();
 
-        if(this.fill !== undefined) {
-            context.fillStyle = this.fill;
+        if(this.attrs.fill !== undefined) {
+            context.fillStyle = this.attrs.fill;
             context.fill();
         }
-        if(this.stroke !== undefined) {
-            context.lineWidth = this.strokeWidth === undefined ? 1 : this.strokeWidth;
-            context.strokeStyle = this.stroke;
+        if(this.attrs.stroke !== undefined) {
+            context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
+            context.strokeStyle = this.attrs.stroke;
             context.stroke();
         }
     },
@@ -83,8 +89,8 @@ Kinetic.Shape.prototype = {
      */
     applyLineJoin: function() {
         var context = this.getContext();
-        if(this.lineJoin !== undefined) {
-            context.lineJoin = this.lineJoin;
+        if(this.attrs.lineJoin !== undefined) {
+            context.lineJoin = this.attrs.lineJoin;
         }
     },
     /**
@@ -93,26 +99,26 @@ Kinetic.Shape.prototype = {
      * @param {String|CanvasGradient|CanvasPattern} fill
      */
     setFill: function(fill) {
-        this.fill = fill;
+        this.attrs.fill = fill;
     },
     /**
      * get fill
      */
     getFill: function() {
-        return this.fill;
+        return this.attrs.fill;
     },
     /**
      * set stroke color
      * @param {String} stroke
      */
     setStroke: function(stroke) {
-        this.stroke = stroke;
+        this.attrs.stroke = stroke;
     },
     /**
      * get stroke color
      */
     getStroke: function() {
-        return this.stroke;
+        return this.attrs.stroke;
     },
     /**
      * set line join
@@ -120,26 +126,26 @@ Kinetic.Shape.prototype = {
      *  default is "miter"
      */
     setLineJoin: function(lineJoin) {
-        this.lineJoin = lineJoin;
+        this.attrs.lineJoin = lineJoin;
     },
     /**
      * get line join
      */
     getLineJoin: function() {
-        return this.lineJoin;
+        return this.attrs.lineJoin;
     },
     /**
      * set stroke width
      * @param {Number} strokeWidth
      */
     setStrokeWidth: function(strokeWidth) {
-        this.strokeWidth = strokeWidth;
+        this.attrs.strokeWidth = strokeWidth;
     },
     /**
      * get stroke width
      */
     getStrokeWidth: function() {
-        return this.strokeWidth;
+        return this.attrs.strokeWidth;
     },
     /**
      * set draw function
@@ -153,8 +159,8 @@ Kinetic.Shape.prototype = {
      */
     save: function() {
         var stage = this.getStage();
-        var w = stage.width;
-        var h = stage.height;
+        var w = stage.attrs.width;
+        var h = stage.attrs.height;
 
         var bufferLayer = stage.bufferLayer;
         var bufferLayerContext = bufferLayer.getContext();
@@ -170,7 +176,7 @@ Kinetic.Shape.prototype = {
      * @param {Layer} layer Layer that the shape will be drawn on
      */
     _draw: function(layer) {
-        if(this.visible) {
+        if(this.attrs.visible) {
             var stage = layer.getStage();
             var context = layer.getContext();
             var family = [];
@@ -198,7 +204,7 @@ Kinetic.Shape.prototype = {
         }
 
         // clear shape data
-        if(this.detectionType === 'pixel') {
+        if(this.attrs.detectionType === 'pixel') {
             this.data = [];
         }
     },
@@ -209,7 +215,7 @@ Kinetic.Shape.prototype = {
     _isPointInShape: function(pos) {
         var stage = this.getStage();
 
-        if(this.detectionType === 'path') {
+        if(this.attrs.detectionType === 'path') {
             var pathLayer = stage.pathLayer;
             var pathLayerContext = pathLayer.getContext();
 
@@ -218,7 +224,7 @@ Kinetic.Shape.prototype = {
             return pathLayerContext.isPointInPath(pos.x, pos.y);
         }
         else {
-            var w = stage.width;
+            var w = stage.attrs.width;
             var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
             return (alpha !== undefined && alpha !== 0);
         }
diff --git a/src/Stage.js b/src/Stage.js
index 363f2aa4..e4182ce4 100644
--- a/src/Stage.js
+++ b/src/Stage.js
@@ -12,6 +12,13 @@
  * @param {int} height
  */
 Kinetic.Stage = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 400;
+    this.attrs.height = 200;
+
     /*
      * if container is a string, assume it's an id for
      * a DOM element
@@ -23,13 +30,6 @@ Kinetic.Stage = function(config) {
     this.nodeType = 'Stage';
     this.container = config.container;
     this.content = document.createElement('div');
-
-    this.width = config.width;
-    this.height = config.height;
-    this.scale = {
-        x: 1,
-        y: 1
-    };
     this.dblClickWindow = 400;
     this.clickStart = false;
     this.targetShape = undefined;
@@ -59,9 +59,6 @@ Kinetic.Stage = function(config) {
     // add stage to global object
     Kinetic.GlobalObject.stages.push(this);
 
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['height', 'width']);
-
     // call super constructors
     Kinetic.Container.apply(this, []);
     Kinetic.Node.apply(this, [config]);
@@ -117,8 +114,8 @@ Kinetic.Stage.prototype = {
         }
 
         // set stage dimensions
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
 
         // set buffer layer and path layer sizes
         this.bufferLayer.getCanvas().width = width;
@@ -131,8 +128,8 @@ Kinetic.Stage.prototype = {
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     },
     /**
@@ -294,11 +291,11 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     add: function(layer) {
-        if(layer.name) {
-            this.childrenNames[layer.name] = layer;
+        if(layer.attrs.name) {
+            this.childrenNames[layer.attrs.name] = layer;
         }
-        layer.canvas.width = this.width;
-        layer.canvas.height = this.height;
+        layer.canvas.width = this.attrs.width;
+        layer.canvas.height = this.attrs.height;
         this._add(layer);
 
         // draw layer and append canvas to container
@@ -344,6 +341,18 @@ Kinetic.Stage.prototype = {
     getStage: function() {
         return this;
     },
+    /**
+     * get width
+     */
+    getWidth: function() {
+        return this.attrs.width;
+    },
+    /**
+     * get height
+     */
+    getHeight: function() {
+        return this.attrs.height;
+    },
     /**
      * detect event
      * @param {Shape} shape
@@ -358,7 +367,7 @@ Kinetic.Stage.prototype = {
             this.targetFound = true;
         }
 
-        if(shape.visible && pos !== undefined && shape._isPointInShape(pos)) {
+        if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
             // handle onmousedown
             if(!isDragging && this.mouseDown) {
                 this.mouseDown = false;
@@ -494,7 +503,7 @@ Kinetic.Stage.prototype = {
         // propapgate backwards through children
         for(var i = children.length - 1; i >= 0; i--) {
             var child = children[i];
-            if(child._listening) {
+            if(child.attrs.listening) {
                 if(child.nodeType === 'Shape') {
                     var exit = this._detectEvent(child, evt);
                     if(exit) {
@@ -535,7 +544,7 @@ Kinetic.Stage.prototype = {
         var shapeDetected = false;
         for(var n = this.children.length - 1; n >= 0; n--) {
             var layer = this.children[n];
-            if(layer.visible && n >= 0 && layer._listening) {
+            if(layer.attrs.visible && n >= 0 && layer.attrs.listening) {
                 if(this._traverseChildren(layer, evt)) {
                     n = -1;
                     shapeDetected = true;
@@ -703,13 +712,13 @@ Kinetic.Stage.prototype = {
             var node = go.drag.node;
             if(node) {
                 var pos = that.getUserPosition();
-                var dc = node.dragConstraint;
-                var db = node.dragBounds;
+                var dc = node.attrs.dragConstraint;
+                var db = node.attrs.dragBounds;
 
                 // default
                 var newNodePos = {
-                    x: pos.x - go.drag.offset.x,
-                    y: pos.y - go.drag.offset.y
+                    x: pos.attrs.x - go.drag.offset.x,
+                    y: pos.attrs.y - go.drag.offset.y
                 };
 
                 // bounds overrides
@@ -730,13 +739,13 @@ Kinetic.Stage.prototype = {
                  * save rotation and scale and then
                  * remove them from the transform
                  */
-                var rot = node.rotation;
+                var rot = node.attrs.rotation;
                 var scale = {
-                    x: node.scale.x,
-                    y: node.scale.y
+                    x: node.attrs.scale.x,
+                    y: node.attrs.scale.y
                 };
-                node.rotation = 0;
-                node.scale = {
+                node.attrs.rotation = 0;
+                node.attrs.scale = {
                     x: 1,
                     y: 1
                 };
@@ -746,23 +755,23 @@ Kinetic.Stage.prototype = {
                 it.invert();
                 it.translate(newNodePos.x, newNodePos.y);
                 newNodePos = {
-                    x: node.x + it.getTranslation().x,
-                    y: node.y + it.getTranslation().y
+                    x: node.attrs.x + it.getTranslation().x,
+                    y: node.attrs.y + it.getTranslation().y
                 };
 
                 // constraint overrides
                 if(dc === 'horizontal') {
-                    newNodePos.y = node.y;
+                    newNodePos.y = node.attrs.y;
                 }
                 else if(dc === 'vertical') {
-                    newNodePos.x = node.x;
+                    newNodePos.x = node.attrs.x;
                 }
 
                 node.setPosition(newNodePos.x, newNodePos.y);
 
                 // restore rotation and scale
                 node.rotate(rot);
-                node.scale = {
+                node.attrs.scale = {
                     x: scale.x,
                     y: scale.y
                 };
@@ -789,8 +798,8 @@ Kinetic.Stage.prototype = {
      */
     _buildDOM: function() {
         // content
-        this.content.style.width = this.width + 'px';
-        this.content.style.height = this.height + 'px';
+        this.content.style.width = this.attrs.width + 'px';
+        this.content.style.height = this.attrs.height + 'px';
         this.content.style.position = 'relative';
         this.content.style.display = 'inline-block';
         this.content.className = 'kineticjs-content';
@@ -816,14 +825,14 @@ Kinetic.Stage.prototype = {
         this.pathLayer.getCanvas().style.display = 'none';
 
         // add buffer layer
-        this.bufferLayer.canvas.width = this.width;
-        this.bufferLayer.canvas.height = this.height;
+        this.bufferLayer.canvas.width = this.attrs.width;
+        this.bufferLayer.canvas.height = this.attrs.height;
         this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
         this.content.appendChild(this.bufferLayer.canvas);
 
         // add path layer
-        this.pathLayer.canvas.width = this.width;
-        this.pathLayer.canvas.height = this.height;
+        this.pathLayer.canvas.width = this.attrs.width;
+        this.pathLayer.canvas.height = this.attrs.height;
         this.pathLayer.canvas.className = 'kineticjs-path-layer';
         this.content.appendChild(this.pathLayer.canvas);
     }
diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js
index d9b395ff..ee38f85a 100644
--- a/src/shapes/Circle.js
+++ b/src/shapes/Circle.js
@@ -8,6 +8,12 @@
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.radius = 0;
+
     this.shapeType = "Circle";
 
     config.drawFunc = function() {
@@ -15,13 +21,10 @@ Kinetic.Circle = function(config) {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
+        context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
         context.closePath();
         this.fillStroke();
     };
-    // used for serialization
-    Kinetic.GlobalObject.jsonProps.call(this, ['radius']);
-
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
 };
@@ -34,13 +37,13 @@ Kinetic.Circle.prototype = {
      * @param {Number} radius
      */
     setRadius: function(radius) {
-        this.radius = radius;
+        this.attrs.radius = radius;
     },
     /**
      * get radius
      */
     getRadius: function() {
-        return this.radius;
+        return this.attrs.radius;
     }
 };
 
diff --git a/src/shapes/Image.js b/src/shapes/Image.js
index 6d88e189..4c4dcb9e 100644
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -8,8 +8,16 @@
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
-	this.shapeType = "Image";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 0;
+    this.attrs.height = 0;
+
+    // special
+    this.image = config.image;
+
     // defaults
     if(config.width === undefined) {
         config.width = config.image.width;
@@ -18,15 +26,16 @@ Kinetic.Image = function(config) {
         config.height = config.image.height;
     }
 
+    this.shapeType = "Image";
     config.drawFunc = function() {
         var canvas = this.getCanvas();
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.rect(0, 0, this.width, this.height);
+        context.rect(0, 0, this.attrs.width, this.attrs.height);
         context.closePath();
         this.fillStroke();
-        context.drawImage(this.image, 0, 0, this.width, this.height);
+        context.drawImage(this.image, 0, 0, this.attrs.width, this.attrs.height);
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
@@ -53,26 +62,26 @@ Kinetic.Image.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.width = width;
+        this.attrs.width = width;
     },
     /**
      * get width
      */
     getWidth: function() {
-        return this.width;
+        return this.attrs.width;
     },
     /**
      * set height
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.height = height;
+        this.attrs.height = height;
     },
     /**
      * get height
      */
     getHeight: function() {
-        return this.height;
+        return this.attrs.height;
     },
     /**
      * set width and height
@@ -80,16 +89,16 @@ Kinetic.Image.prototype = {
      * @param {Number} height
      */
     setSize: function(width, height) {
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
     },
     /**
      * return image size
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     }
 };
diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js
index 00e44ebe..57512916 100644
--- a/src/shapes/Polygon.js
+++ b/src/shapes/Polygon.js
@@ -8,15 +8,21 @@
  * @param {Object} config
  */
 Kinetic.Polygon = function(config) {
-	this.shapeType = "Polygon";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.points = {};
+
+    this.shapeType = "Polygon";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(this.points[0].x, this.points[0].y);
-        for(var n = 1; n < this.points.length; n++) {
-            context.lineTo(this.points[n].x, this.points[n].y);
+        context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
+        for(var n = 1; n < this.attrs.points.length; n++) {
+            context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
         }
         context.closePath();
         this.fillStroke();
@@ -33,13 +39,13 @@ Kinetic.Polygon.prototype = {
      * @param {Array} points
      */
     setPoints: function(points) {
-        this.points = points;
+        this.attrs.points = points;
     },
     /**
      * get points array
      */
     getPoints: function() {
-        return this.points;
+        return this.attrs.points;
     }
 };
 
diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js
index b86bdcf7..e103df10 100644
--- a/src/shapes/Rect.js
+++ b/src/shapes/Rect.js
@@ -8,13 +8,20 @@
  * @param {Object} config
  */
 Kinetic.Rect = function(config) {
-	this.shapeType = "Rect";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.width = 0;
+    this.attrs.height = 0;
+
+    this.shapeType = "Rect";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.rect(0, 0, this.width, this.height);
+        context.rect(0, 0, this.attrs.width, this.attrs.height);
         context.closePath();
         this.fillStroke();
     };
@@ -30,26 +37,26 @@ Kinetic.Rect.prototype = {
      * @param {Number} width
      */
     setWidth: function(width) {
-        this.width = width;
+        this.attrs.width = width;
     },
     /**
      * get width
      */
     getWidth: function() {
-        return this.width;
+        return this.attrs.width;
     },
     /**
      * set height
      * @param {Number} height
      */
     setHeight: function(height) {
-        this.height = height;
+        this.attrs.height = height;
     },
     /**
      * get height
      */
     getHeight: function() {
-        return this.height;
+        return this.attrs.height;
     },
     /**
      * set width and height
@@ -57,16 +64,16 @@ Kinetic.Rect.prototype = {
      * @param {Number} height
      */
     setSize: function(width, height) {
-        this.width = width;
-        this.height = height;
+        this.attrs.width = width;
+        this.attrs.height = height;
     },
     /**
      * return rect size
      */
     getSize: function() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.attrs.width,
+            height: this.attrs.height
         };
     }
 };
diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js
index 8b582d6c..12532a86 100644
--- a/src/shapes/RegularPolygon.js
+++ b/src/shapes/RegularPolygon.js
@@ -8,17 +8,24 @@
  * @param {Object} config
  */
 Kinetic.RegularPolygon = function(config) {
-	this.shapeType = "RegularPolygon";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.radius = 0;
+    this.attrs.sides = 0;
+
+    this.shapeType = "RegularPolygon";
+
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(0, 0 - this.radius);
+        context.moveTo(0, 0 - this.attrs.radius);
 
-        for(var n = 1; n < this.sides; n++) {
-            var x = this.radius * Math.sin(n * 2 * Math.PI / this.sides);
-            var y = -1 * this.radius * Math.cos(n * 2 * Math.PI / this.sides);
+        for(var n = 1; n < this.attrs.sides; n++) {
+            var x = this.attrs.radius * Math.sin(n * 2 * Math.PI / this.attrs.sides);
+            var y = -1 * this.attrs.radius * Math.cos(n * 2 * Math.PI / this.attrs.sides);
             context.lineTo(x, y);
         }
         context.closePath();
@@ -31,44 +38,31 @@ Kinetic.RegularPolygon = function(config) {
  * RegularPolygon methods
  */
 Kinetic.RegularPolygon.prototype = {
-    /**
-     * set number of points
-     * @param {int} points
-     */
-    setPoints: function(points) {
-        this.points = points;
-    },
-    /**
-     * get number of points
-     */
-    getPoints: function() {
-        return this.points;
-    },
     /**
      * set radius
      * @param {Number} radius
      */
     setRadius: function(radius) {
-        this.radius = radius;
+        this.attrs.radius = radius;
     },
     /**
      * get radius
      */
     getRadius: function() {
-        return this.radius;
+        return this.attrs.radius;
     },
     /**
      * set number of sides
      * @param {int} sides
      */
     setSides: function(sides) {
-        this.sides = sides;
+        this.attrs.sides = sides;
     },
     /**
      * get number of sides
      */
     getSides: function() {
-        return this.sides;
+        return this.attrs.sides;
     }
 };
 
diff --git a/src/shapes/Star.js b/src/shapes/Star.js
index 979b880a..90363d37 100644
--- a/src/shapes/Star.js
+++ b/src/shapes/Star.js
@@ -8,18 +8,25 @@
  * @param {Object} config
  */
 Kinetic.Star = function(config) {
-	this.shapeType = "Star";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.points = [];
+    this.attrs.innerRadius = 0;
+    this.attrs.outerRadius = 0;
+
+    this.shapeType = "Star";
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.moveTo(0, 0 - this.outerRadius);
+        context.moveTo(0, 0 - this.attrs.outerRadius);
 
-        for(var n = 1; n < this.points * 2; n++) {
-            var radius = n % 2 === 0 ? this.outerRadius : this.innerRadius;
-            var x = radius * Math.sin(n * Math.PI / this.points);
-            var y = -1 * radius * Math.cos(n * Math.PI / this.points);
+        for(var n = 1; n < this.attrs.points * 2; n++) {
+            var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
+            var x = radius * Math.sin(n * Math.PI / this.attrs.points);
+            var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points);
             context.lineTo(x, y);
         }
         context.closePath();
@@ -37,39 +44,39 @@ Kinetic.Star.prototype = {
      * @param {Array} points
      */
     setPoints: function(points) {
-        this.points = points;
+        this.attrs.points = points;
     },
     /**
      * get points array
      */
     getPoints: function() {
-        return this.points;
+        return this.attrs.points;
     },
     /**
      * set outer radius
      * @param {Number} radius
      */
     setOuterRadius: function(radius) {
-        this.outerRadius = radius;
+        this.attrs.outerRadius = radius;
     },
     /**
      * get outer radius
      */
     getOuterRadius: function() {
-        return this.outerRadius;
+        return this.attrs.outerRadius;
     },
     /**
      * set inner radius
      * @param {Number} radius
      */
     setInnerRadius: function(radius) {
-        this.innerRadius = radius;
+        this.attrs.innerRadius = radius;
     },
     /**
      * get inner radius
      */
     getInnerRadius: function() {
-        return this.innerRadius;
+        return this.attrs.innerRadius;
     }
 };
 // extend Shape
diff --git a/src/shapes/Text.js b/src/shapes/Text.js
index a0f22c3a..b77b29ed 100644
--- a/src/shapes/Text.js
+++ b/src/shapes/Text.js
@@ -8,10 +8,24 @@
  * @param {Object} config
  */
 Kinetic.Text = function(config) {
-	this.shapeType = "Text";
-	
+    // default attrs
+    if(this.attrs === undefined) {
+        this.attrs = {};
+    }
+    this.attrs.fontFamily = '';
+    this.attrs.text = '';
+    this.attrs.fontSize = 12;
+    this.attrs.textStroke = undefined;
+    this.attrs.textStrokeWidth = undefined;
+    this.attrs.align = 'left';
+    this.attrs.verticalAlign = 'top';
+    this.attrs.padding = 0;
+    this.attrs.fontStyle = 'normal';
+
+    this.shapeType = "Text";
+
     /*
-     * defaults
+     * special defaults
      */
     if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
         if(config.textStroke === undefined) {
@@ -21,30 +35,18 @@ Kinetic.Text = function(config) {
             config.textStrokeWidth = 2;
         }
     }
-    if(config.align === undefined) {
-        config.align = 'left';
-    }
-    if(config.verticalAlign === undefined) {
-        config.verticalAlign = 'top';
-    }
-    if(config.padding === undefined) {
-        config.padding = 0;
-    }
-    if(config.fontStyle === undefined) {
-        config.fontStyle = 'normal';
-    }
 
     config.drawFunc = function() {
         var context = this.getContext();
-        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
+        context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
         context.textBaseline = 'middle';
         var textHeight = this.getTextHeight();
         var textWidth = this.getTextWidth();
-        var p = this.padding;
+        var p = this.attrs.padding;
         var x = 0;
         var y = 0;
 
-        switch (this.align) {
+        switch (this.attrs.align) {
             case 'center':
                 x = textWidth / -2 - p;
                 break;
@@ -53,7 +55,7 @@ Kinetic.Text = function(config) {
                 break;
         }
 
-        switch (this.verticalAlign) {
+        switch (this.attrs.verticalAlign) {
             case 'middle':
                 y = textHeight / -2 - p;
                 break;
@@ -75,21 +77,21 @@ Kinetic.Text = function(config) {
         var ty = textHeight / 2 + p + y;
 
         // draw text
-        if(this.textFill !== undefined) {
-            context.fillStyle = this.textFill;
-            context.fillText(this.text, tx, ty);
+        if(this.attrs.textFill !== undefined) {
+            context.fillStyle = this.attrs.textFill;
+            context.fillText(this.attrs.text, tx, ty);
         }
-        if(this.textStroke !== undefined || this.textStrokeWidth !== undefined) {
+        if(this.attrs.textStroke !== undefined || this.attrs.textStrokeWidth !== undefined) {
             // defaults
-            if(this.textStroke === undefined) {
-                this.textStroke = 'black';
+            if(this.attrs.textStroke === undefined) {
+                this.attrs.textStroke = 'black';
             }
-            else if(this.textStrokeWidth === undefined) {
-                this.textStrokeWidth = 2;
+            else if(this.attrs.textStrokeWidth === undefined) {
+                this.attrs.textStrokeWidth = 2;
             }
-            context.lineWidth = this.textStrokeWidth;
-            context.strokeStyle = this.textStroke;
-            context.strokeText(this.text, tx, ty);
+            context.lineWidth = this.attrs.textStrokeWidth;
+            context.strokeStyle = this.attrs.textStroke;
+            context.strokeText(this.attrs.text, tx, ty);
         }
     };
     // call super constructor
@@ -104,130 +106,130 @@ Kinetic.Text.prototype = {
      * @param {String} fontFamily
      */
     setFontFamily: function(fontFamily) {
-        this.fontFamily = fontFamily;
+        this.attrs.fontFamily = fontFamily;
     },
     /**
      * get font family
      */
     getFontFamily: function() {
-        return this.fontFamily;
+        return this.attrs.fontFamily;
     },
     /**
      * set font size
      * @param {int} fontSize
      */
     setFontSize: function(fontSize) {
-        this.fontSize = fontSize;
+        this.attrs.fontSize = fontSize;
     },
     /**
      * get font size
      */
     getFontSize: function() {
-        return this.fontSize;
+        return this.attrs.fontSize;
     },
     /**
      * set font style.  Can be "normal", "italic", or "bold".  "normal" is the default.
      * @param {String} fontStyle
      */
     setFontStyle: function(fontStyle) {
-        this.fontStyle = fontStyle;
+        this.attrs.fontStyle = fontStyle;
     },
     /**
      * get font style
      */
     getFontStyle: function() {
-        return this.fontStyle;
+        return this.attrs.fontStyle;
     },
     /**
      * set text fill color
      * @param {String} textFill
      */
     setTextFill: function(textFill) {
-        this.textFill = textFill;
+        this.attrs.textFill = textFill;
     },
     /**
      * get text fill color
      */
     getTextFill: function() {
-        return this.textFill;
+        return this.attrs.textFill;
     },
     /**
      * set text stroke color
      * @param {String} textStroke
      */
     setTextStroke: function(textStroke) {
-        this.textStroke = textStroke;
+        this.attrs.textStroke = textStroke;
     },
     /**
      * get text stroke color
      */
     getTextStroke: function() {
-        return this.textStroke;
+        return this.attrs.textStroke;
     },
     /**
      * set text stroke width
      * @param {int} textStrokeWidth
      */
     setTextStrokeWidth: function(textStrokeWidth) {
-        this.textStrokeWidth = textStrokeWidth;
+        this.attrs.textStrokeWidth = textStrokeWidth;
     },
     /**
      * get text stroke width
      */
     getTextStrokeWidth: function() {
-        return this.textStrokeWidth;
+        return this.attrs.textStrokeWidth;
     },
     /**
      * set padding
      * @param {int} padding
      */
     setPadding: function(padding) {
-        this.padding = padding;
+        this.attrs.padding = padding;
     },
     /**
      * get padding
      */
     getPadding: function() {
-        return this.padding;
+        return this.attrs.padding;
     },
     /**
      * set horizontal align of text
      * @param {String} align align can be 'left', 'center', or 'right'
      */
     setAlign: function(align) {
-        this.align = align;
+        this.attrs.align = align;
     },
     /**
      * get horizontal align
      */
     getAlign: function() {
-        return this.align;
+        return this.attrs.align;
     },
     /**
      * set vertical align of text
      * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
      */
     setVerticalAlign: function(verticalAlign) {
-        this.verticalAlign = verticalAlign;
+        this.attrs.verticalAlign = verticalAlign;
     },
     /**
      * get vertical align
      */
     getVerticalAlign: function() {
-        return this.verticalAlign;
+        return this.attrs.verticalAlign;
     },
     /**
      * set text
      * @param {String} text
      */
     setText: function(text) {
-        this.text = text;
+        this.attrs.text = text;
     },
     /**
      * get text
      */
     getText: function() {
-        return this.text;
+        return this.attrs.text;
     },
     /**
      * get text width in pixels
@@ -247,12 +249,12 @@ Kinetic.Text.prototype = {
     getTextSize: function() {
         var context = this.getContext();
         context.save();
-        context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
-        var metrics = context.measureText(this.text);
+        context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
+        var metrics = context.measureText(this.attrs.text);
         context.restore();
         return {
             width: metrics.width,
-            height: parseInt(this.fontSize, 10)
+            height: parseInt(this.attrs.fontSize, 10)
         };
     }
 };
diff --git a/tests/js/unitTests.js b/tests/js/unitTests.js
index 991e7138..98000464 100644
--- a/tests/js/unitTests.js
+++ b/tests/js/unitTests.js
@@ -27,8 +27,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -40,6 +40,7 @@ Test.prototype.tests = {
         stage.add(layer);
         layer.add(group);
         layer.draw();
+
     },
     'STAGE - add layer then group then shape': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -50,8 +51,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -64,108 +65,110 @@ Test.prototype.tests = {
         group.add(circle);
         layer.draw();
     },
-    'STAGE - serialize stage': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-        var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4,
-            name: 'myCircle',
-            draggable: true
-        });
-
-        stage.add(layer);
-        layer.add(group);
-        group.add(circle);
-        layer.draw();
-
-		console.log(stage.toJSON())
-
-        var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
-        test(stage.toJSON() === expectedJson, 'problem with serialization');
-    },
-    'STAGE - load stage with json': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
-        var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
-        stage.load(json);
-
-        test(stage.toJSON() === json, "serialized stage is incorrect");
-    },
     /*
-    'STAGE - serialize stage with custom shape': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
+     'STAGE - serialize stage': function(containerId) {
+     var stage = new Kinetic.Stage({
+     container: containerId,
+     width: 578,
+     height: 200
+     });
+     var layer = new Kinetic.Layer();
+     var group = new Kinetic.Group();
+     var circle = new Kinetic.Circle({
+     x: stage.getWidth() / 2,
+     y: stage.getHeight() / 2,
+     radius: 70,
+     fill: 'green',
+     stroke: 'black',
+     strokeWidth: 4,
+     name: 'myCircle',
+     draggable: true
+     });
 
-        var drawTriangle = function() {
-            var context = this.getContext();
-            context.beginPath();
-            context.moveTo(200, 50);
-            context.lineTo(420, 80);
-            context.quadraticCurveTo(300, 100, 260, 170);
-            context.closePath();
-            this.fillStroke();
-        };
-        var triangle = new Kinetic.Shape({
-            drawFunc: drawTriangle,
-            drawFuncName: 'drawTriangle',
-            fill: "#00D2FF",
-            stroke: "black",
-            strokeWidth: 4
-        });
+     stage.add(layer);
+     layer.add(group);
+     group.add(circle);
+     layer.draw();
 
-        stage.add(layer);
-        layer.add(group);
-        group.add(triangle);
-        layer.draw();
+     console.log(stage.toJSON())
 
-        var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
-        test(stage.toJSON() === expectedJson, "problem with serialization");
+     var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
+     test(stage.toJSON() === expectedJson, 'problem with serialization');
+     },
+     'STAGE - load stage with json': function(containerId) {
+     var stage = new Kinetic.Stage({
+     container: containerId,
+     width: 578,
+     height: 200
+     });
 
-        console.log(stage.toJSON());
-    },
-    'STAGE - load stage with custom shape': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
+     var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
+     stage.load(json);
 
-        var drawTriangle = function() {
-            var context = this.getContext();
-            context.beginPath();
-            context.moveTo(200, 50);
-            context.lineTo(420, 80);
-            context.quadraticCurveTo(300, 100, 260, 170);
-            context.closePath();
-            this.fillStroke();
-        };
-        var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
-        stage.load(json, {
-            drawTriangle: drawTriangle
-        });
+     test(stage.toJSON() === json, "serialized stage is incorrect");
+     },
+     */
+    /*
+     'STAGE - serialize stage with custom shape': function(containerId) {
+     var stage = new Kinetic.Stage({
+     container: containerId,
+     width: 578,
+     height: 200
+     });
+     var layer = new Kinetic.Layer();
+     var group = new Kinetic.Group();
 
-        test(stage.toJSON() === json, "serialized stage is incorrect");
-    },
-    */
+     var drawTriangle = function() {
+     var context = this.getContext();
+     context.beginPath();
+     context.moveTo(200, 50);
+     context.lineTo(420, 80);
+     context.quadraticCurveTo(300, 100, 260, 170);
+     context.closePath();
+     this.fillStroke();
+     };
+     var triangle = new Kinetic.Shape({
+     drawFunc: drawTriangle,
+     drawFuncName: 'drawTriangle',
+     fill: "#00D2FF",
+     stroke: "black",
+     strokeWidth: 4
+     });
+
+     stage.add(layer);
+     layer.add(group);
+     group.add(triangle);
+     layer.draw();
+
+     var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
+     test(stage.toJSON() === expectedJson, "problem with serialization");
+
+     console.log(stage.toJSON());
+     },
+     'STAGE - load stage with custom shape': function(containerId) {
+     var stage = new Kinetic.Stage({
+     container: containerId,
+     width: 578,
+     height: 200
+     });
+
+     var drawTriangle = function() {
+     var context = this.getContext();
+     context.beginPath();
+     context.moveTo(200, 50);
+     context.lineTo(420, 80);
+     context.quadraticCurveTo(300, 100, 260, 170);
+     context.closePath();
+     this.fillStroke();
+     };
+     var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
+     stage.load(json, {
+     drawTriangle: drawTriangle
+     });
+
+     test(stage.toJSON() === json, "serialized stage is incorrect");
+     },
+     */
     'STAGE - set stage size': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -174,8 +177,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -202,8 +205,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -225,8 +228,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -258,8 +261,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -384,8 +387,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle1 = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: 100,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -393,8 +396,8 @@ Test.prototype.tests = {
         });
 
         var circle2 = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: 300,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -402,12 +405,13 @@ Test.prototype.tests = {
         });
 
         layer.add(circle1);
-        layer.add(circle1);
+        layer.add(circle2);
         stage.add(layer);
 
         test(layer.children.length === 2, 'layer should have 2 children');
 
         layer.removeChildren();
+        layer.draw();
 
         test(layer.children.length === 0, 'layer should have 0 children');
     },
@@ -419,8 +423,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -447,8 +451,8 @@ Test.prototype.tests = {
         var group = new Kinetic.Group();
 
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -468,8 +472,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -495,8 +499,8 @@ Test.prototype.tests = {
         var blueGroup = new Kinetic.Group();
 
         var greenCircle = new Kinetic.Circle({
-            x: stage.width / 2 - 100,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2 - 100,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -505,8 +509,8 @@ Test.prototype.tests = {
         });
 
         var blueCircle = new Kinetic.Circle({
-            x: stage.width / 2 + 100,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2 + 100,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -523,8 +527,8 @@ Test.prototype.tests = {
         blueLayer.removeChildren();
         var blueGroup2 = new Kinetic.Group();
         var blueCircle2 = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -582,8 +586,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -614,8 +618,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -636,25 +640,21 @@ Test.prototype.tests = {
                 height: 200
             });
             var layer = new Kinetic.Layer();
-            var darth = new Kinetic.Image({
-                x: 10,
-                y: 10,
+            darth = new Kinetic.Image({
+                x: 200,
+                y: 60,
                 image: imageObj,
                 width: 100,
                 centerOffset: {
-                    x: this.width / 2,
-                    y: this.height / 2
+                    x: 50,
+                    y: imageObj.height / 2
                 }
             });
 
+            console.log(darth);
+
             layer.add(darth);
             stage.add(layer);
-
-            stage.onFrame(function() {
-                darth.rotate(Math.PI / 100);
-                layer.draw();
-            });
-            //stage.start();
         };
         imageObj.src = '../darth-vader.jpg';
     },
@@ -690,11 +690,7 @@ Test.prototype.tests = {
             points: points,
             fill: 'green',
             stroke: 'blue',
-            strokeWidth: 5,
-            centerOffset: {
-                x: 300,
-                y: 100
-            }
+            strokeWidth: 5
         });
 
         layer.add(poly);
@@ -731,11 +727,6 @@ Test.prototype.tests = {
         layer.add(poly);
         stage.add(layer);
 
-        stage.onFrame(function() {
-            poly.rotate(Math.PI / 100);
-            layer.draw();
-        });
-        //stage.start();
     },
     'SHAPES - add regular polygon square': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -832,12 +823,6 @@ Test.prototype.tests = {
 
         layer.add(star);
         stage.add(layer);
-
-        stage.onFrame(function() {
-            star.rotate(Math.PI / 100);
-            layer.draw();
-        });
-        //stage.start();
     },
     'SHAPES - add five point star with line join': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -905,7 +890,7 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
 
-        test(rect.stroke === 'black', 'stroke should be black');
+        test(rect.getStroke() === 'black', 'stroke should be black');
     },
     'SHAPES - use default stroke width': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -925,7 +910,7 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
 
-        test(rect.strokeWidth === 2, 'stroke width should be 2');
+        test(rect.getStrokeWidth() === 2, 'stroke width should be 2');
     },
     'SHAPES - set center offset after instantiation': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -949,13 +934,13 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
 
-        test(rect.centerOffset.x === 20, 'center offset x should be 20');
-        test(rect.centerOffset.y === 20, 'center offset y should be 20');
+        test(rect.getCenterOffset().x === 20, 'center offset x should be 20');
+        test(rect.getCenterOffset().y === 20, 'center offset y should be 20');
 
         rect.setCenterOffset(40, 40);
 
-        test(rect.centerOffset.x === 40, 'center offset x should be 40');
-        test(rect.centerOffset.y === 40, 'center offset y should be 40');
+        test(rect.getCenterOffset().x === 40, 'center offset x should be 40');
+        test(rect.getCenterOffset().y === 40, 'center offset y should be 40');
 
     },
     'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) {
@@ -1093,8 +1078,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
 
         var text = new Kinetic.Text({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             stroke: 'green',
             strokeWidth: 5,
             fill: '#ddd',
@@ -1159,8 +1144,8 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
 
         var text = new Kinetic.Text({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             text: 'Hello World!',
             fontSize: 60,
             fontFamily: 'Calibri',
@@ -1174,8 +1159,6 @@ Test.prototype.tests = {
         layer.add(text);
         stage.add(layer);
 
-        console.log(text.getTextSize());
-
         test(text.getTextSize().width > 0, 'text width should have a value');
         test(text.getTextSize().height > 0, 'text height should have a value');
         test(text.getTextWidth() > 0, 'text width should have a value');
@@ -1189,8 +1172,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1211,8 +1194,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1240,8 +1223,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1254,12 +1237,12 @@ Test.prototype.tests = {
         layer.draw();
 
         // test defaults
-        test(circle._draggable === false, 'draggable should be false');
-        test(circle.dragConstraint === 'none', 'drag constraint should be none');
-        test(circle.dragBounds.left === undefined, 'drag left should be undefined');
-        test(circle.dragBounds.top === undefined, 'drag top should be undefined');
-        test(circle.dragBounds.right === undefined, 'drag right should be undefined');
-        test(circle.dragBounds.bottom === undefined, 'drag bottom should be undefined');
+        test(circle.attrs.draggable === false, 'draggable should be false');
+        test(circle.attrs.dragConstraint === 'none', 'drag constraint should be none');
+        test(circle.attrs.dragBounds.left === undefined, 'drag left should be undefined');
+        test(circle.attrs.dragBounds.top === undefined, 'drag top should be undefined');
+        test(circle.attrs.dragBounds.right === undefined, 'drag right should be undefined');
+        test(circle.attrs.dragBounds.bottom === undefined, 'drag bottom should be undefined');
         test(circle.getDragConstraint() === 'none', 'drag constraint should be none');
         test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined');
 
@@ -1274,12 +1257,12 @@ Test.prototype.tests = {
         });
 
         // test new properties
-        test(circle._draggable === true, 'draggable should be true');
-        test(circle.dragConstraint === 'vertical', 'drag constraint should be vertical');
-        test(circle.dragBounds.left === 50, 'drag left should be 50');
-        test(circle.dragBounds.top === 100, 'drag top should be 100');
-        test(circle.dragBounds.right === 150, 'drag right should be 150');
-        test(circle.dragBounds.bottom === 200, 'drag bottom should be 200');
+        test(circle.attrs.draggable === true, 'draggable should be true');
+        test(circle.attrs.dragConstraint === 'vertical', 'drag constraint should be vertical');
+        test(circle.attrs.dragBounds.left === 50, 'drag left should be 50');
+        test(circle.attrs.dragBounds.top === 100, 'drag top should be 100');
+        test(circle.attrs.dragBounds.right === 150, 'drag right should be 150');
+        test(circle.attrs.dragBounds.bottom === 200, 'drag bottom should be 200');
         test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical');
         test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
     },
@@ -1327,8 +1310,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1350,8 +1333,8 @@ Test.prototype.tests = {
         var group = new Kinetic.Group();
 
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1424,8 +1407,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1446,8 +1429,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1471,8 +1454,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1491,8 +1474,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1518,8 +1501,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1542,8 +1525,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1562,8 +1545,8 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var circle = new Kinetic.Circle({
-            x: stage.width / 2,
-            y: stage.height / 2,
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1593,14 +1576,14 @@ Test.prototype.tests = {
 
         var shape1 = new Kinetic.Circle({
             x: 150,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 40,
             fill: 'green'
         });
 
         var shape2 = new Kinetic.Circle({
             x: 250,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 40,
             fill: 'green'
         });
@@ -1650,7 +1633,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1659,7 +1642,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1690,7 +1673,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1699,7 +1682,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1732,7 +1715,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1741,7 +1724,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1777,7 +1760,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1786,7 +1769,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1821,7 +1804,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1830,7 +1813,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1856,7 +1839,7 @@ Test.prototype.tests = {
 
         var blueCircle = new Kinetic.Circle({
             x: 200,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'blue',
             stroke: 'black',
@@ -1865,7 +1848,7 @@ Test.prototype.tests = {
 
         var greenCircle = new Kinetic.Circle({
             x: 280,
-            y: stage.height / 2,
+            y: stage.getHeight() / 2,
             radius: 70,
             fill: 'green',
             stroke: 'black',
@@ -1907,7 +1890,7 @@ Test.prototype.tests = {
         var amplitude = 150;
         var period = 1000;
         // in ms
-        var centerX = stage.width / 2 - 100 / 2;
+        var centerX = stage.getWidth() / 2 - 100 / 2;
 
         stage.onFrame(function(frame) {
             rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;