diff --git a/Thorfile b/Thorfile
index 7c6b3385..af3924b8 100644
--- a/Thorfile
+++ b/Thorfile
@@ -3,7 +3,7 @@ require 'json/pure'
 class Build < Thor  
   # This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
   FILES = [
-    "license.js", "src/Global.js", "src/util/Type.js", "src/util/Class.js", "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js",
+    "license.js", "src/Global.js", "src/util/Type.js", "src/util/Canvas.js", "src/util/Class.js", "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js",
     "src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js",
     "src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
     "src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js", "src/filters/Grayscale.js"
diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js
index 552b01f0..c4607608 100644
--- a/dist/kinetic-core.js
+++ b/dist/kinetic-core.js
@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Jul 17 2012
+ * Date: Jul 18 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -323,6 +323,103 @@ Kinetic.Type = {
     }
 };
 
+///////////////////////////////////////////////////////////////////////
+//  Canvas
+///////////////////////////////////////////////////////////////////////
+/**
+ * Canvas wrapper constructor
+ * @constructor
+ * @param {Number} width
+ * @param {Number} height
+ */
+Kinetic.Canvas = function(width, height) {
+    this.element = document.createElement('canvas');
+    this.context = this.element.getContext('2d');
+
+    // set dimensions
+    this.element.width = width;
+    this.element.height = height;
+};
+
+Kinetic.Canvas.prototype = {
+    /**
+     * clear canvas
+     * @name clear
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    clear: function() {
+        var context = this.getContext();
+        var el = this.getElement();
+        context.clearRect(0, 0, el.width, el.height);
+    },
+    /**
+     * get element
+     * @name getElement
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    getElement: function() {
+        return this.element;
+    },
+    /**
+     * get context
+     * @name getContext
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    getContext: function() {
+        return this.context;
+    },
+    /**
+     * set width
+     * @name setWidth
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setWidth: function(width) {
+        this.element.width = width;
+    },
+    /**
+     * set height
+     * @name setHeight
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setHeight: function(height) {
+        this.element.height = height;
+    },
+    /**
+     * set size
+     * @name setSize
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setSize: function(width, height) {
+        this.setWidth(width);
+        this.setHeight(height);
+    },
+    /**
+     * strip away all functions that draw pixels onto the bitmap
+     * @name strip
+     * @methodOf Kinetic.Canvas.prototype
+     * @param {CanvasContext} context
+     */
+    strip: function() {
+        var context = this.context;
+        context.stroke = function() {
+        };
+        context.fill = function() {
+        };
+        context.fillRect = function(x, y, width, height) {
+            context.rect(x, y, width, height);
+        };
+        context.strokeRect = function(x, y, width, height) {
+            context.rect(x, y, width, height);
+        };
+        context.drawImage = function() {
+        };
+        context.fillText = function() {
+        };
+        context.strokeText = function() {
+        };
+    }
+};
+
 ///////////////////////////////////////////////////////////////////////
 //  Class
 ///////////////////////////////////////////////////////////////////////
@@ -867,7 +964,10 @@ Kinetic.Node = Kinetic.Class.extend({
      * @methodOf Kinetic.Node.prototype
      */
     getAbsolutePosition: function() {
-        return this.getAbsoluteTransform().getTranslation();
+        var trans = this.getAbsoluteTransform();
+        var o = this.getOffset();
+        trans.translate(o.x, o.y);
+        return trans.getTranslation();
     },
     /**
      * set absolute position relative to stage
@@ -897,9 +997,16 @@ Kinetic.Node = Kinetic.Class.extend({
             x: 1,
             y: 1
         };
+        this.attrs.offset = {
+            x: 0,
+            y: 0
+        };
+
+        var o = this.getOffset();
 
         // unravel transform
         var it = this.getAbsoluteTransform();
+
         it.invert();
         it.translate(pos.x, pos.y);
         pos = {
@@ -915,6 +1022,10 @@ Kinetic.Node = Kinetic.Class.extend({
             x: scale.x,
             y: scale.y
         };
+        this.attrs.offset = {
+            x: offset.x,
+            y: offset.y
+        };
     },
     /**
      * move node by an amount
@@ -1208,7 +1319,6 @@ Kinetic.Node = Kinetic.Class.extend({
         for(var n = 0; n < family.length; n++) {
             var node = family[n];
             var m = node.getTransform();
-
             am.multiply(m);
         }
 
@@ -1284,14 +1394,14 @@ Kinetic.Node = Kinetic.Class.extend({
     saveImageData: function() {
         try {
             var stage = this.getStage();
-            var bufferLayer = stage.bufferLayer;
-            var bufferLayerContext = bufferLayer.getContext();
+            var bufferCanvas = stage.bufferCanvas;
+            var bufferContext = bufferCanvas.getContext();
             var width = stage.getWidth();
             var height = stage.getHeight();
 
-            bufferLayer.clear();
-            this._draw(bufferLayer);
-            var imageData = bufferLayerContext.getImageData(0, 0, width, height);
+            bufferCanvas.clear();
+            this._draw(bufferCanvas);
+            var imageData = bufferContext.getImageData(0, 0, width, height);
             this.imageData = imageData;
         }
         catch(e) {
@@ -1319,24 +1429,23 @@ Kinetic.Node = Kinetic.Class.extend({
      * specified, then "image/png" will result. For "image/jpeg", specify a quality
      * level as quality (range 0.0 - 1.0)
      * @name toDataURL
-     * @methodOf Kinetic.Stage.prototype
+     * @methodOf Kinetic.Node.prototype
      * @param {String} [mimeType]
      * @param {Number} [quality]
      */
     toDataURL: function(mimeType, quality) {
-        var bufferLayer = this.getStage().bufferLayer;
-        var bufferCanvas = bufferLayer.getCanvas();
-        var bufferContext = bufferLayer.getContext();
-        bufferLayer.clear();
-        this._draw(bufferLayer);
+        var bufferCanvas = this.getStage().bufferCanvas;
+        var bufferContext = bufferCanvas.getContext();
+        bufferCanvas.clear();
+        this._draw(bufferCanvas);
 
         try {
             // If this call fails (due to browser bug, like in Firefox 3.6),
             // then revert to previous no-parameter image/png behavior
-            return bufferLayer.getCanvas().toDataURL(mimeType, quality);
+            return bufferCanvas.element.toDataURL(mimeType, quality);
         }
         catch(e) {
-            return bufferLayer.getCanvas().toDataURL();
+            return bufferCanvas.element.toDataURL();
         }
     },
     /**
@@ -1391,9 +1500,10 @@ Kinetic.Node = Kinetic.Class.extend({
         if(pos) {
             var m = this.getTransform().getTranslation();
             var am = this.getAbsoluteTransform().getTranslation();
+            var ap = this.getAbsolutePosition();
             go.drag.node = this;
-            go.drag.offset.x = pos.x - this.getAbsoluteTransform().getTranslation().x;
-            go.drag.offset.y = pos.y - this.getAbsoluteTransform().getTranslation().y;
+            go.drag.offset.x = pos.x - ap.x;
+            go.drag.offset.y = pos.y - ap.y;
         }
     },
     _onDraggableChange: function() {
@@ -1895,18 +2005,18 @@ Kinetic.Container = Kinetic.Node.extend({
     /**
      * draw children
      */
-    _drawChildren: function(layer) {
+    _drawChildren: function(canvas) {
         var stage = this.getStage();
         var children = this.children;
         for(var n = 0; n < children.length; n++) {
             var child = children[n];
             if(child.nodeType === 'Shape') {
                 if(child.isVisible() && stage.isVisible()) {
-                    child._draw( layer ? layer : child.getLayer());
+                    child._draw(canvas);
                 }
             }
             else {
-                child.draw(layer);
+                child.draw(canvas);
             }
         }
     },
@@ -1914,27 +2024,8 @@ Kinetic.Container = Kinetic.Node.extend({
      * set children indices
      */
     _setChildrenIndices: function() {
-        /*
-         * if reordering Layers, remove all canvas elements
-         * from the container except the buffer and backstage canvases
-         * and then readd all the layers
-         */
-        if(this.nodeType === 'Stage') {
-            var canvases = this.content.children;
-            var bufferCanvas = canvases[0];
-            var backstageCanvas = canvases[1];
-
-            this.content.innerHTML = '';
-            this.content.appendChild(bufferCanvas);
-            this.content.appendChild(backstageCanvas);
-        }
-
         for(var n = 0; n < this.children.length; n++) {
             this.children[n].index = n;
-
-            if(this.nodeType === 'Stage') {
-                this.content.appendChild(this.children[n].canvas);
-            }
         }
     }
 });
@@ -2026,8 +2117,8 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function(layer) {
-        this._draw(layer);
+    draw: function(canvas) {
+        this._draw(canvas);
     },
     /**
      * set stage size
@@ -2229,37 +2320,25 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(callback, mimeType, quality) {
-        /*
-         * we need to create a temp layer rather than using
-         * the bufferLayer because the stage toDataURL method
-         * is asynchronous, which means that other parts of the
-         * code base could be updating or clearing the bufferLayer
-         * while the stage toDataURL method is processing
-         */
-        var tempLayer = new Kinetic.Layer();
-        tempLayer.getCanvas().width = this.attrs.width;
-        tempLayer.getCanvas().height = this.attrs.height;
-        tempLayer.parent = this;
-        var tempCanvas = tempLayer.getCanvas();
-        var tempContext = tempLayer.getContext();
-
+        var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height);
+        var context = canvas.getContext();
         var layers = this.children;
 
         function drawLayer(n) {
             var layer = layers[n];
-            var layerUrl;
+            var canvasUrl;
             try {
                 // If this call fails (due to browser bug, like in Firefox 3.6),
                 // then revert to previous no-parameter image/png behavior
-                layerUrl = layer.getCanvas().toDataURL(mimeType, quality);
+                canvasUrl = canvas.getElement().toDataURL(mimeType, quality);
             }
             catch(e) {
-                layerUrl = layer.getCanvas().toDataURL();
+                canvasUrl = canvas.getElement().toDataURL();
             }
 
             var imageObj = new Image();
             imageObj.onload = function() {
-                tempContext.drawImage(imageObj, 0, 0);
+                context.drawImage(imageObj, 0, 0);
 
                 if(n < layers.length - 1) {
                     drawLayer(n + 1);
@@ -2268,14 +2347,14 @@ Kinetic.Stage = Kinetic.Container.extend({
                     try {
                         // If this call fails (due to browser bug, like in Firefox 3.6),
                         // then revert to previous no-parameter image/png behavior
-                        callback(tempLayer.getCanvas().toDataURL(mimeType, quality));
+                        callback(canvas.getElement().toDataURL(mimeType, quality));
                     }
                     catch(e) {
-                        callback(tempLayer.getCanvas().toDataURL());
+                        callback(canvas.getElement().toDataURL());
                     }
                 }
             };
-            imageObj.src = layerUrl;
+            imageObj.src = canvasUrl;
         }
         drawLayer(0);
     },
@@ -2301,18 +2380,15 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.content.style.width = width + 'px';
         this.content.style.height = height + 'px';
 
-        // set buffer layer and path layer sizes
-        this.bufferLayer.getCanvas().width = width;
-        this.bufferLayer.getCanvas().height = height;
-        this.pathLayer.getCanvas().width = width;
-        this.pathLayer.getCanvas().height = height;
+        // set buffer canvas and path canvas sizes
+        this.bufferCanvas.setSize(width, height);
+        this.pathCanvas.setSize(width, height);
 
         // set user defined layer dimensions
         var layers = this.children;
         for(var n = 0; n < layers.length; n++) {
             var layer = layers[n];
-            layer.getCanvas().width = width;
-            layer.getCanvas().height = height;
+            layer.getCanvas().setSize(width, height);
             layer.draw();
         }
     },
@@ -2336,12 +2412,11 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Layer} layer
      */
     _add: function(layer) {
-        layer.canvas.width = this.attrs.width;
-        layer.canvas.height = this.attrs.height;
+        layer.canvas.setSize(this.attrs.width, this.attrs.height);
 
         // draw layer and append canvas to container
         layer.draw();
-        this.content.appendChild(layer.canvas);
+        this.content.appendChild(layer.canvas.element);
 
         /*
          * set layer last draw time to zero
@@ -2544,7 +2619,7 @@ Kinetic.Stage = Kinetic.Container.extend({
 
         this._setMousePosition(evt);
         this._setTouchPosition(evt);
-        this.pathLayer.clear();
+        this.pathCanvas.clear();
 
         /*
          * loop through layers.  If at any point an event
@@ -2735,28 +2810,6 @@ Kinetic.Stage = Kinetic.Container.extend({
             left: left
         };
     },
-    /**
-     * modify path context
-     * @param {CanvasContext} context
-     */
-    _modifyPathContext: function(context) {
-        context.stroke = function() {
-        };
-        context.fill = function() {
-        };
-        context.fillRect = function(x, y, width, height) {
-            context.rect(x, y, width, height);
-        };
-        context.strokeRect = function(x, y, width, height) {
-            context.rect(x, y, width, height);
-        };
-        context.drawImage = function() {
-        };
-        context.fillText = function() {
-        };
-        context.strokeText = function() {
-        };
-    },
     /**
      * end drag and drop
      */
@@ -2851,34 +2904,15 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.content.className = 'kineticjs-content';
         this.attrs.container.appendChild(this.content);
 
-        // default layers
-        this.bufferLayer = new Kinetic.Layer({
-            name: 'bufferLayer'
+        this.bufferCanvas = new Kinetic.Canvas({
+            width: this.attrs.width,
+            height: this.attrs.height
         });
-        this.pathLayer = new Kinetic.Layer({
-            name: 'pathLayer'
+        this.pathCanvas = new Kinetic.Canvas({
+            width: this.attrs.width,
+            height: this.attrs.height
         });
-
-        // set parents
-        this.bufferLayer.parent = this;
-        this.pathLayer.parent = this;
-
-        // customize back stage context
-        this._modifyPathContext(this.pathLayer.context);
-
-        // hide canvases
-        this.bufferLayer.getCanvas().style.display = 'none';
-        this.pathLayer.getCanvas().style.display = 'none';
-
-        // add buffer layer
-        this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
-        this.content.appendChild(this.bufferLayer.canvas);
-
-        // add path layer
-        this.pathLayer.canvas.className = 'kineticjs-path-layer';
-        this.content.appendChild(this.pathLayer.canvas);
-
-        this.setSize(this.attrs.width, this.attrs.height);
+        this.pathCanvas.strip();
         this._resizeDOM();
     },
     _addId: function(node) {
@@ -2959,8 +2993,8 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.anim = undefined;
         this.animRunning = false;
     },
-    _draw: function(layer) {
-        this._drawChildren(layer);
+    _draw: function(canvas) {
+        this._drawChildren(canvas);
     }
 });
 
@@ -3030,9 +3064,8 @@ Kinetic.Layer = Kinetic.Container.extend({
         this.beforeDrawFunc = undefined;
         this.afterDrawFunc = undefined;
 
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d');
-        this.canvas.style.position = 'absolute';
+        this.canvas = new Kinetic.Canvas();
+        this.canvas.getElement().style.position = 'absolute';
 
         // call super constructor
         this._super(config);
@@ -3043,7 +3076,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Layer.prototype
      */
-    draw: function(layer) {
+    draw: function(canvas) {
         var throttle = this.attrs.throttle;
         var date = new Date();
         var time = date.getTime();
@@ -3051,7 +3084,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         var tt = 1000 / throttle;
 
         if(timeDiff >= tt || throttle > 200) {
-            this._draw(layer);
+            this._draw(canvas);
 
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
@@ -3068,7 +3101,7 @@ Kinetic.Layer = Kinetic.Container.extend({
              * wait 17ms before trying again (60fps)
              */
             this.drawTimeout = setTimeout(function() {
-                that.draw(layer);
+                that.draw(canvas);
             }, 17);
         }
     },
@@ -3088,19 +3121,6 @@ Kinetic.Layer = Kinetic.Container.extend({
     afterDraw: function(func) {
         this.afterDrawFunc = func;
     },
-    /**
-     * clears the canvas context tied to the layer.  Clearing
-     *  a layer does not remove its children.  The nodes within
-     *  the layer will be redrawn whenever the .draw() method
-     *  is used again.
-     * @name clear
-     * @methodOf Kinetic.Layer.prototype
-     */
-    clear: function() {
-        var context = this.getContext();
-        var canvas = this.getCanvas();
-        context.clearRect(0, 0, canvas.width, canvas.height);
-    },
     /**
      * get layer canvas
      * @name getCanvas
@@ -3110,12 +3130,12 @@ Kinetic.Layer = Kinetic.Container.extend({
         return this.canvas;
     },
     /**
-     * get layer context
+     * get layer canvas context
      * @name getContext
      * @methodOf Kinetic.Layer.prototype
      */
     getContext: function() {
-        return this.context;
+        return this.canvas.context;
     },
     /**
      * Creates a composite data URL. If MIME type is not
@@ -3125,7 +3145,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * based on what's draw on the layer, rather than drawing
      * the current state of each child node
      * @name toDataURL
-     * @methodOf Kinetic.Stage.prototype
+     * @methodOf Kinetic.Layer.prototype
      * @param {String} [mimeType]
      * @param {Number} [quality]
      */
@@ -3133,16 +3153,24 @@ Kinetic.Layer = Kinetic.Container.extend({
         try {
             // If this call fails (due to browser bug, like in Firefox 3.6),
             // then revert to previous no-parameter image/png behavior
-            return this.getCanvas().toDataURL(mimeType, quality);
+            return this.getCanvas().element.toDataURL(mimeType, quality);
         }
         catch(e) {
-            return this.getCanvas().toDataURL();
+            return this.getCanvas().element.toDataURL();
         }
     },
     /**
      * private draw children
      */
-    _draw: function(layer) {
+    _draw: function(canvas) {
+        /*
+         * if canvas is not defined, then use the canvas
+         * tied to the layer
+         */
+        if(!canvas) {
+            canvas = this.getCanvas();
+        }
+
         var date = new Date();
         var time = date.getTime();
         this.lastDrawTime = time;
@@ -3153,8 +3181,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         }
 
         if(this.attrs.clearBeforeDraw) {
-            var clearLayer = layer ? layer : this;
-            clearLayer.clear();
+            canvas.clear();
         }
 
         if(this.isVisible()) {
@@ -3164,7 +3191,7 @@ Kinetic.Layer = Kinetic.Container.extend({
             }
 
             // draw children
-            this._drawChildren(layer);
+            this._drawChildren(canvas);
         }
 
         // after draw  handler
@@ -3220,12 +3247,12 @@ Kinetic.Group = Kinetic.Container.extend({
         // call super constructor
         this._super(config);
     },
-    draw: function(layer) {
-        this._draw(layer);
+    draw: function(canvas) {
+        this._draw(canvas);
     },
-    _draw: function(layer) {
+    _draw: function(canvas) {
         if(this.attrs.visible) {
-            this._drawChildren(layer);
+            this._drawChildren(canvas);
         }
     }
 });
@@ -3262,24 +3289,20 @@ Kinetic.Shape = Kinetic.Node.extend({
         this._super(config);
     },
     /**
-     * get layer context where the shape is being drawn.  When
-     * the shape is being rendered, .getContext() returns the context of the
-     * user created layer that contains the shape.  When the event detection
-     * engine is determining whether or not an event has occured on that shape,
-     * .getContext() returns the context of the invisible path layer.
+     * get canvas context tied to the layer
      * @name getContext
      * @methodOf Kinetic.Shape.prototype
      */
     getContext: function() {
-        return this.tempLayer.getContext();
+        return this.getLayer().getContext();
     },
     /**
-     * get shape temp layer canvas
+     * get canvas tied to the layer
      * @name getCanvas
      * @methodOf Kinetic.Shape.prototype
      */
     getCanvas: function() {
-        return this.tempLayer.getCanvas();
+        return this.getLayer().getCanvas();
     },
     /**
      * helper method to stroke the shape and apply
@@ -3287,15 +3310,14 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name stroke
      * @methodOf Kinetic.Shape.prototype
      */
-    stroke: function() {
+    stroke: function(context) {
         var go = Kinetic.Global;
         var appliedShadow = false;
-        var context = this.getContext();
 
         if(this.attrs.stroke || this.attrs.strokeWidth) {
             context.save();
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             var stroke = this.attrs.stroke ? this.attrs.stroke : 'black';
@@ -3303,12 +3325,12 @@ Kinetic.Shape = Kinetic.Node.extend({
 
             context.lineWidth = strokeWidth;
             context.strokeStyle = stroke;
-            context.stroke();
+            context.stroke(context);
             context.restore();
         }
 
         if(appliedShadow) {
-            this.stroke();
+            this.stroke(context);
         }
     },
     /**
@@ -3317,16 +3339,15 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name fill
      * @methodOf Kinetic.Shape.prototype
      * */
-    fill: function() {
+    fill: function(context) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
 
         var fill = this.attrs.fill;
 
         if(fill) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             var s = fill.start;
@@ -3337,7 +3358,7 @@ Kinetic.Shape = Kinetic.Node.extend({
             if( typeof fill == 'string') {
                 f = this.attrs.fill;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             // pattern
             else if(fill.image) {
@@ -3354,12 +3375,11 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
 
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
                 context.restore();
             }
             // linear gradient
             else if(!s.radius && !e.radius) {
-                var context = this.getContext();
                 var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
                 var colorStops = fill.colorStops;
 
@@ -3369,11 +3389,10 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
                 f = grd;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             // radial gradient
             else if((s.radius || s.radius === 0) && (e.radius || e.radius === 0)) {
-                var context = this.getContext();
                 var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
                 var colorStops = fill.colorStops;
 
@@ -3383,18 +3402,18 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
                 f = grd;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             else {
                 f = 'black';
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
         }
         context.restore();
 
         if(appliedShadow) {
-            this.fill();
+            this.fill(context);
         }
     },
     /**
@@ -3403,13 +3422,12 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name fillText
      * @methodOf Kinetic.Shape.prototype
      */
-    fillText: function(text) {
+    fillText: function(context, text) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
         if(this.attrs.textFill) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
             context.fillStyle = this.attrs.textFill;
             context.fillText(text, 0, 0);
@@ -3417,7 +3435,7 @@ Kinetic.Shape = Kinetic.Node.extend({
         context.restore();
 
         if(appliedShadow) {
-            this.fillText(text, 0, 0);
+            this.fillText(context, text, 0, 0);
         }
     },
     /**
@@ -3427,13 +3445,12 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @methodOf Kinetic.Shape.prototype
      * @param {String} text
      */
-    strokeText: function(text) {
+    strokeText: function(context, text) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
         if(this.attrs.textStroke || this.attrs.textStrokeWidth) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             // defaults
@@ -3445,12 +3462,12 @@ Kinetic.Shape = Kinetic.Node.extend({
             }
             context.lineWidth = this.attrs.textStrokeWidth;
             context.strokeStyle = this.attrs.textStroke;
-            context.strokeText(text, 0, 0);
+            context.strokeText(context, text, 0, 0);
         }
         context.restore();
 
         if(appliedShadow) {
-            this.strokeText(text, 0, 0);
+            this.strokeText(context, text, 0, 0);
         }
     },
     /**
@@ -3461,21 +3478,20 @@ Kinetic.Shape = Kinetic.Node.extend({
      */
     drawImage: function() {
         var appliedShadow = false;
-        var context = this.getContext();
+        var context = arguments[0];
         context.save();
         var a = Array.prototype.slice.call(arguments);
 
-        if(a.length === 5 || a.length === 9) {
+        if(a.length === 6 || a.length === 10) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
-            switch(a.length) {
-                case 5:
-                    context.drawImage(a[0], a[1], a[2], a[3], a[4]);
-                    break;
-                case 9:
-                    context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
-                    break;
+            
+            if(a.length === 6) {
+                context.drawImage(a[1], a[2], a[3], a[4], a[5]);
+            }
+            else {
+                context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
             }
         }
 
@@ -3491,8 +3507,7 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name applyLineJoin
      * @methodOf Kinetic.Shape.prototype
      */
-    applyLineJoin: function() {
-        var context = this.getContext();
+    applyLineJoin: function(context) {
         if(this.attrs.lineJoin) {
             context.lineJoin = this.attrs.lineJoin;
         }
@@ -3501,8 +3516,7 @@ Kinetic.Shape = Kinetic.Node.extend({
      * apply shadow.  return true if shadow was applied
      * and false if it was not
      */
-    _applyShadow: function() {
-        var context = this.getContext();
+    _applyShadow: function(context) {
         var s = this.attrs.shadow;
         if(s) {
             var aa = this.getAbsoluteAlpha();
@@ -3540,12 +3554,12 @@ Kinetic.Shape = Kinetic.Node.extend({
 
         // path detection
         if(this.attrs.detectionType === 'path') {
-            var pathLayer = stage.pathLayer;
-            var pathLayerContext = pathLayer.getContext();
+            var pathCanvas = stage.pathCanvas;
+            var pathCanvasContext = pathCanvas.getContext();
 
-            this._draw(pathLayer);
+            this._draw(pathCanvas);
 
-            return pathLayerContext.isPointInPath(pos.x, pos.y);
+            return pathCanvasContext.isPointInPath(pos.x, pos.y);
         }
 
         // pixel detection
@@ -3558,10 +3572,10 @@ Kinetic.Shape = Kinetic.Node.extend({
         // default
         return false;
     },
-    _draw: function(layer) {
-        if(layer && this.attrs.drawFunc) {
-            var stage = layer.getStage();
-            var context = layer.getContext();
+    _draw: function(canvas) {
+        if(this.attrs.drawFunc) {
+            var stage = this.getStage();
+            var context = canvas.getContext();
             var family = [];
             var parent = this.parent;
 
@@ -3580,8 +3594,6 @@ Kinetic.Shape = Kinetic.Node.extend({
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
 
-            this.tempLayer = layer;
-
             /*
              * pre styles include alpha, linejoin
              */
@@ -3589,11 +3601,11 @@ Kinetic.Shape = Kinetic.Node.extend({
             if(absAlpha !== 1) {
                 context.globalAlpha = absAlpha;
             }
-            this.applyLineJoin();
+            this.applyLineJoin(context);
 
             // draw the shape
             this.appliedShadow = false;
-            this.attrs.drawFunc.call(this);
+            this.attrs.drawFunc.call(this, canvas.getContext());
             context.restore();
         }
     }
@@ -3700,8 +3712,7 @@ Kinetic.Rect = Kinetic.Shape.extend({
 
         this.shapeType = "Rect";
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             if(this.attrs.cornerRadius === 0) {
                 // simple rect - don't bother doing all that complicated maths stuff.
@@ -3721,8 +3732,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -3810,9 +3821,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
 
         this.shapeType = "Ellipse";
 
-        config.drawFunc = function() {
-            var canvas = this.getCanvas();
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var r = this.getRadius();
             context.beginPath();
             context.save();
@@ -3822,8 +3831,8 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
             context.arc(0, 0, r.x, 0, Math.PI * 2, true);
             context.restore();
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -3894,18 +3903,16 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
 Kinetic.Image = Kinetic.Shape.extend({
     init: function(config) {
         this.shapeType = "Image";
-        config.drawFunc = function() {
+        config.drawFunc = function(context) {
             if(!!this.attrs.image) {
                 var width = this.getWidth();
                 var height = this.getHeight();
-                var canvas = this.getCanvas();
-                var context = this.getContext();
 
                 context.beginPath();
                 context.rect(0, 0, width, height);
                 context.closePath();
-                this.fill();
-                this.stroke();
+                this.fill(context);
+                this.stroke(context);
 
                 // if cropping
                 if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
@@ -3913,11 +3920,11 @@ Kinetic.Image = Kinetic.Shape.extend({
                     var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
                     var cropWidth = this.attrs.crop.width;
                     var cropHeight = this.attrs.crop.height;
-                    this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
+                    this.drawImage(context, this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
                 }
                 // no cropping
                 else {
-                    this.drawImage(this.attrs.image, 0, 0, width, height);
+                    this.drawImage(context, this.attrs.image, 0, 0, width, height);
                 }
             }
         };
@@ -4105,9 +4112,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
             frameRate: 17
         });
 
-        config.drawFunc = function() {
+        config.drawFunc = function(context) {
             if(!!this.attrs.image) {
-                var context = this.getContext();
                 var anim = this.attrs.animation;
                 var index = this.attrs.index;
                 var f = this.attrs.animations[anim][index];
@@ -4116,7 +4122,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
                 context.rect(0, 0, f.width, f.height);
                 context.closePath();
 
-                this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+                this.drawImage(context, this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
             }
         };
         // call super constructor
@@ -4263,16 +4269,15 @@ Kinetic.Polygon = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Polygon";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             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.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -4312,8 +4317,7 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
         });
 
         this.shapeType = "RegularPolygon";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             context.moveTo(0, 0 - this.attrs.radius);
 
@@ -4323,8 +4327,8 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
                 context.lineTo(x, y);
             }
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -4376,8 +4380,7 @@ Kinetic.Star = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Star";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             context.moveTo(0, 0 - this.attrs.outerRadius);
 
@@ -4389,8 +4392,8 @@ Kinetic.Star = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -4467,8 +4470,7 @@ Kinetic.Text = Kinetic.Shape.extend({
         this.dummyCanvas = document.createElement('canvas');
         this.shapeType = "Text";
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             /*
              * draw rect
              */
@@ -4494,8 +4496,8 @@ Kinetic.Text = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
             /*
              * draw text
              */
@@ -4523,8 +4525,8 @@ Kinetic.Text = Kinetic.Shape.extend({
                     context.translate((this.getBoxWidth() - this._getTextSize(text).width - p * 2) / 2, 0);
                 }
 
-                this.fillText(text);
-                this.strokeText(text);
+                this.fillText(context, text);
+                this.strokeText(context, text);
                 context.restore();
 
                 context.translate(0, lineHeightPx);
@@ -4846,8 +4848,7 @@ Kinetic.Line = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Line";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var lastPos = {};
             context.beginPath();
 
@@ -4860,7 +4861,7 @@ Kinetic.Line = Kinetic.Shape.extend({
                     // draw dashed line
                     var lastX = this.attrs.points[n - 1].x;
                     var lastY = this.attrs.points[n - 1].y;
-                    this._dashedLine(lastX, lastY, x, y, this.attrs.dashArray);
+                    this._dashedLine(context, lastX, lastY, x, y, this.attrs.dashArray);
                 }
                 else {
                     // draw normal line
@@ -4872,7 +4873,7 @@ Kinetic.Line = Kinetic.Shape.extend({
                 context.lineCap = this.attrs.lineCap;
             }
 
-            this.stroke();
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -4880,8 +4881,7 @@ Kinetic.Line = Kinetic.Shape.extend({
     /**
      * draw dashed line.  Written by Phrogz
      */
-    _dashedLine: function(x, y, x2, y2, dashArray) {
-        var context = this.getContext();
+    _dashedLine: function(context, x, y, x2, y2, dashArray) {
         var dashCount = dashArray.length;
 
         var dx = (x2 - x), dy = (y2 - y);
@@ -4990,8 +4990,7 @@ Kinetic.Path = Kinetic.Shape.extend({
         this.dataArray = [];
         var that = this;
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var ca = this.dataArray;
             // context position
             context.beginPath();
@@ -5032,8 +5031,8 @@ Kinetic.Path = Kinetic.Shape.extend({
                         break;
                 }
             }
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js
index cb2ae5fe..f024f692 100644
--- a/dist/kinetic-core.min.js
+++ b/dist/kinetic-core.min.js
@@ -3,7 +3,7 @@
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Jul 17 2012
+ * Date: Jul 18 2012
  *
  * Copyright (C) 2011 - 2012 by Eric Rowell
  *
@@ -25,5 +25,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var Kinetic={};Kinetic.Filters={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],stages:[],idCounter:0,tempNodes:[],maxDragTimeInterval:20,drag:{moving:!1,offset:{x:0,y:0},lastDrawTime:0},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},_pullNodes:function(a){var b=this.tempNodes;for(var c=0;c<b.length;c++){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this.tempNodes.splice(c,1),c-=1)}}},Kinetic.Type={_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)=="[object Array]"},_isNumber:function(a){return Object.prototype.toString.call(a)=="[object Number]"},_isString:function(a){return Object.prototype.toString.call(a)=="[object String]"},_hasMethods:function(a){var b=[];for(var c in a)this._isFunction(a[c])&&b.push(c);return b.length>0},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];if(this._isNumber(b))return{x:b,y:b};if(this._isArray(b))return{x:b[0],y:b[1]};if(this._isObject(b))return b}else if(a.length>=2)return{x:a[0],y:a[1]}}else if(this._isObject(a))return a;return{x:0,y:0}},_getSize:function(a){if(this._isNumber(a))return{width:a,height:a};if(this._isArray(a))if(a.length===1){var b=a[0];if(this._isNumber(b))return{width:b,height:b};if(this._isArray(b)){if(b.length>=4)return{width:b[2],height:b[3]};if(b.length>=2)return{width:b[0],height:b[1]}}else if(this._isObject(b))return b}else{if(a.length>=4)return{width:a[2],height:a[3]};if(a.length>=2)return{width:a[0],height:a[1]}}else if(this._isObject(a))return a;return{width:0,height:0}},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c<a.length;c+=2)b.push({x:a[c],y:a[c+1]});return b},_getImage:function(a,b){if(!a)b(null);else if(this._isElement(a))b(a);else if(this._isString(a)){var c=new Image;c.onload=function(){b(c)},c.src=a}else if(a.data){var d=document.createElement("canvas");d.width=a.width,d.height=a.height;var e=d.getContext("2d");e.putImageData(a,0,0);var f=d.toDataURL(),c=new Image;c.onload=function(){b(c)},c.src=f}else b(null)}},function(){var a=!1;Kinetic.Class=function(){},Kinetic.Class.extend=function(b){function f(){!a&&this.init&&this.init.apply(this,arguments)}var c=this.prototype;a=!0;var d=new this;a=!1;for(var e in b)d[e]=typeof b[e]=="function"&&typeof c[e]=="function"?function(a,b){return function(){var d=this._super;this._super=c[a];var e=b.apply(this,arguments);return this._super=d,e}}(e,b[e]):b[e];return f.prototype=d,f.prototype.constructor=f,f.extend=arguments.callee,f}}(),Kinetic.Animation={animations:[],animIdCounter:0,animRunning:!1,frame:{time:0,timeDiff:0,lastTime:0},_addAnimation:function(a){a.id=this.animIdCounter++,this.animations.push(a)},_removeAnimation:function(a){var b=a.id,c=this.animations;for(var d=0;d<c.length;d++)if(c[d].id===b)return this.animations.splice(d,1),!1},_runFrames:function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];c.node&&c.node._id!==undefined&&(a[c.node._id]=c.node),c.func&&c.func(this.frame)}for(var d in a)a[d].draw()},_updateFrameObject:function(){var a=new Date,b=a.getTime();this.frame.lastTime===0?this.frame.lastTime=b:(this.frame.timeDiff=b-this.frame.lastTime,this.frame.lastTime=b,this.frame.time+=this.frame.timeDiff)},_animationLoop:function(){if(this.animations.length>0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())}},requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),Kinetic.Node=Kinetic.Class.extend({init:function(a){this.defaultNodeAttrs={visible:!0,listening:!0,name:undefined,alpha:1,x:0,y:0,scale:{x:1,y:1},rotation:0,offset:{x:0,y:0},dragConstraint:"none",dragBounds:{},draggable:!1},this.setDefaultAttrs(this.defaultNodeAttrs),this.eventListeners={},this.setAttrs(a),this.on("draggableChange.kinetic",function(){this._onDraggableChange()});var b=this;this.on("idChange.kinetic",function(a){var c=b.getStage();c&&(c._removeId(a.oldVal),c._addId(b))}),this.on("nameChange.kinetic",function(a){var c=b.getStage();c&&(c._removeName(a.oldVal,b._id),c._addName(b))}),this._onDraggableChange()},on:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d],f=e,g=f.split("."),h=g[0],i=g.length>1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c<b.length;c++){var d=b[c],e=d,f=e.split("."),g=f[0];if(this.eventListeners[g]&&f.length>1){var h=f[1];for(var i=0;i<this.eventListeners[g].length;i++)if(this.eventListeners[g][i].name===h){this.eventListeners[g].splice(i,1);if(this.eventListeners[g].length===0){delete this.eventListeners[g];break}i--}}else delete this.eventListeners[g]}},getAttrs:function(){return this.attrs},setDefaultAttrs:function(a){this.attrs===undefined&&(this.attrs={});if(a)for(var b in a)this.attrs[b]===undefined&&(this.attrs[b]=a[b])},setAttrs:function(a){var b=Kinetic.Type,c=this;if(a!==undefined){function d(a,e,f){for(var g in e){var h=e[g],i=a[g];f===0&&c._fireBeforeChangeEvent(g,i,h),a[g]===undefined&&h!==undefined&&(a[g]={});if(b._isObject(h)&&!b._isArray(h)&&!b._isElement(h)&&!b._hasMethods(h))Kinetic.Type._isObject(a[g])||(a[g]={}),d(a[g],h,f+1);else switch(g){case"rotationDeg":c._setAttr(a,"rotation",e[g]*Math.PI/180),g="rotation";break;case"offset":var j=b._getXY(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y);break;case"scale":var j=b._getXY(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y);break;case"points":c._setAttr(a,g,b._getPoints(h));break;case"crop":var j=b._getXY(h),k=b._getSize(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y),c._setAttr(a[g],"width",k.width),c._setAttr(a[g],"height",k.height);break;default:c._setAttr(a,g,h)}f===0&&c._fireChangeEvent(g,i,h)}}d(this.attrs,a,0)}},isVisible:function(){return this.attrs.visible&&this.getParent()&&!this.getParent().isVisible()?!1:this.attrs.visible},show:function(){this.setAttrs({visible:!0})},hide:function(){this.setAttrs({visible:!1})},getZIndex:function(){return this.index},getAbsoluteZIndex:function(){function e(b){var f=[];for(var g=0;g<b.length;g++){var h=b[g];d++,h.nodeType!=="Shape"&&(f=f.concat(h.getChildren())),h._id===c._id&&(g=b.length)}f.length>0&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setPosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments));this.setAttrs(a)},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.offset.x,y:this.attrs.offset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.getX(),c=this.getY();a.x!==undefined&&(b+=a.x),a.y!==undefined&&(c+=a.y),this.setAttrs({x:b,y:c})},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.setAttrs({rotation:this.getRotation()+a})},rotateDeg:function(a){this.setAttrs({rotation:this.getRotation()+a*Math.PI/180})},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},isDragging:function(){var a=Kinetic.Global;return a.drag.node!==undefined&&a.drag.node._id===this._id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType!=="Stage"&&this.getParent()?this.getParent().getStage():this.nodeType==="Stage"?this:undefined},simulate:function(a){this._handleEvent(a,{})},transitionTo:function(a){var b=Kinetic.Animation;this.transAnim&&(b._removeAnimation(this.transAnim),this.transAnim=null);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e._onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=null,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d<b.length;d++){var e=b[d],f=e.getTransform();a.multiply(f)}return a},getTransform:function(){var a=new Kinetic.Transform;return(this.attrs.x!==0||this.attrs.y!==0)&&a.translate(this.attrs.x,this.attrs.y),this.attrs.rotation!==0&&a.rotate(this.attrs.rotation),(this.attrs.scale.x!==1||this.attrs.scale.y!==1)&&a.scale(this.attrs.scale.x,this.attrs.scale.y),(this.attrs.offset.x!==0||this.attrs.offset.y!==0)&&a.translate(-1*this.attrs.offset.x,-1*this.attrs.offset.y),a},clone:function(a){var b=this.shapeType||this.nodeType,c=new Kinetic[b](this.attrs);for(var d in this.eventListeners){var e=this.eventListeners[d];for(var f=0;f<e.length;f++){var g=e[f];g.name.indexOf("kinetic")<0&&(c.eventListeners[d]||(c.eventListeners[d]=[]),c.eventListeners[d].push(g))}}return c.setAttrs(a),c},saveImageData:function(){try{var a=this.getStage(),b=a.bufferLayer,c=b.getContext(),d=a.getWidth(),e=a.getHeight();b.clear(),this._draw(b);var f=c.getImageData(0,0,d,e);this.imageData=f}catch(g){Kinetic.Global.warn("Image data could not saved because canvas is dirty.")}},clearImageData:function(){delete this.imageData},getImageData:function(){return this.imageData},toDataURL:function(a,b){var c=this.getStage().bufferLayer,d=c.getCanvas(),e=c.getContext();c.clear(),this._draw(c);try{return c.getCanvas().toDataURL(a,b)}catch(f){return c.getCanvas().toDataURL()}},toImage:function(a){Kinetic.Type._getImage(this.toDataURL(),function(b){a(b)})},_setImageData:function(a){a&&a.data&&(this.imageData=a)},_fireBeforeChangeEvent:function(a,b,c){this._handleEvent("before"+a.toUpperCase()+"Change",{oldVal:b,newVal:c})},_fireChangeEvent:function(a,b,c){this._handleEvent(a+"Change",{oldVal:b,newVal:c})},_setAttr:function(a,b,c){c!==undefined&&(a===undefined&&(a={}),a[b]=c)},_listenDrag:function(){this._dragCleanup();var a=Kinetic.Global,b=this;this.on("mousedown.kinetic touchstart.kinetic",function(a){b._initDrag()})},_initDrag:function(){var a=Kinetic.Global,b=this.getStage(),c=b.getUserPosition();if(c){var d=this.getTransform().getTranslation(),e=this.getAbsoluteTransform().getTranslation();a.drag.node=this,a.drag.offset.x=c.x-this.getAbsoluteTransform().getTranslation().x,a.drag.offset.y=c.y-this.getAbsoluteTransform().getTranslation().y}},_onDraggableChange:function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.Global;a&&b.drag.node&&b.drag.node._id===this._id&&a._endDrag()}},_dragCleanup:function(){this.off("mousedown.kinetic"),this.off("touchstart.kinetic")},_handleEvent:function(a,b){this.nodeType==="Shape"&&(b.shape=this);var c=this.getStage(),d=c?c.mouseoverShape:null,e=c?c.mouseoutShape:null,f=this.eventListeners,g=!0;a==="mouseover"&&e&&e._id===this._id?g=!1:a==="mouseout"&&d&&d._id===this._id&&(g=!1);if(g){if(f[a]){var h=f[a];for(var i=0;i<h.length;i++)h[i].handler.apply(this,[b])}c&&d&&e&&(c.mouseoverShape=d.parent,c.mouseoutShape=e.parent),Kinetic.Global.BUBBLE_WHITELIST.indexOf(a)>=0&&!b.cancelBubble&&this.parent&&this._handleEvent.call(this.parent,a,b)}}}),Kinetic.Node.addSetters=function(constructor,a){for(var b=0;b<a.length;b++){var c=a[b];this._addSetter(constructor,c)}},Kinetic.Node.addGetters=function(constructor,a){for(var b=0;b<a.length;b++){var c=a[b];this._addGetter(constructor,c)}},Kinetic.Node.addGettersSetters=function(constructor,a){this.addSetters(constructor,a),this.addGetters(constructor,a)},Kinetic.Node._addSetter=function(constructor,a){var b=this,c="set"+a.charAt(0).toUpperCase()+a.slice(1);constructor.prototype[c]=function(){arguments.length==1?arg=arguments[0]:arg=Array.prototype.slice.call(arguments);var b={};b[a]=arg,this.setAttrs(b)}},Kinetic.Node._addGetter=function(constructor,a){var b=this,c="get"+a.charAt(0).toUpperCase()+a.slice(1);constructor.prototype[c]=function(b){return this.attrs[a]}},Kinetic.Node.addGettersSetters(Kinetic.Node,["x","y","scale","detectionType","rotation","alpha","name","id","offset","draggable","dragConstraint","dragBounds","listening"]),Kinetic.Node.addSetters(Kinetic.Node,["rotationDeg"]),Kinetic.Container=Kinetic.Node.extend({init:function(a){this.children=[],this._super(a)},getChildren:function(){return this.children},removeChildren:function(){while(this.children.length>0)this.remove(this.children[0])},add:function(a){a._id=Kinetic.Global.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a);var b=a.getStage();if(b===undefined){var c=Kinetic.Global;c.tempNodes.push(a)}else{b._addId(a),b._addName(a);var c=Kinetic.Global;c._pullNodes(b)}return this._add!==undefined&&this._add(a),this},remove:function(a){if(a&&a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a.getId()),b._removeName(a.getName(),a._id));var c=Kinetic.Global;for(var d=0;d<c.tempNodes.length;d++){var e=c.tempNodes[d];if(e._id===a._id){c.tempNodes.splice(d,1);break}}this.children.splice(a.index,1),this._setChildrenIndices();while(a.children&&a.children.length>0)a.remove(a.children[0]);this._remove!==undefined&&this._remove(a)}return this},get:function(a){var b=this.getStage(),c,d=a.slice(1);if(a.charAt(0)==="#")c=b.ids[d]!==undefined?[b.ids[d]]:[];else{if(a.charAt(0)!==".")return a==="Shape"||a==="Group"||a==="Layer"?this._getNodes(a):!1;c=b.names[d]!==undefined?b.names[d]:[]}var e=[];for(var f=0;f<c.length;f++){var g=c[f];this.isAncestorOf(g)&&e.push(g)}return e},isAncestorOf:function(a){if(this.nodeType==="Stage")return!0;var b=a.getParent();while(b){if(b._id===this._id)return!0;b=b.getParent()}return!1},getIntersections:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=[],c=this.get("Shape");for(var d=0;d<c.length;d++){var e=c[d];e.isVisible()&&e.intersects(a)&&b.push(e)}return b},_getNodes:function(a){function c(d){var e=d.getChildren();for(var f=0;f<e.length;f++){var g=e[f];g.nodeType===a?b.push(g):g.nodeType!=="Shape"&&c(g)}}var b=[];return c(this),b},_drawChildren:function(a){var b=this.getStage(),c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.nodeType==="Shape"?e.isVisible()&&b.isVisible()&&e._draw(a?a:e.getLayer()):e.draw(a)}},_setChildrenIndices:function(){if(this.nodeType==="Stage"){var a=this.content.children,b=a[0],c=a[1];this.content.innerHTML="",this.content.appendChild(b),this.content.appendChild(c)}for(var d=0;d<this.children.length;d++)this.children[d].index=d,this.nodeType==="Stage"&&this.content.appendChild(this.children[d].canvas)}}),Kinetic.Stage=Kinetic.Container.extend({init:function(a){this.setDefaultAttrs({width:400,height:200,throttle:80}),typeof a.container=="string"&&(a.container=document.getElementById(a.container)),this._super(a),this._setStageDefaultProperties(),this._id=Kinetic.Global.idCounter++,this._buildDOM(),this._bindContentEvents(),this.on("widthChange.kinetic",function(){this._resizeDOM()}),this.on("heightChange.kinetic",function(){this._resizeDOM()});var b=Kinetic.Global;b.stages.push(this),this._addId(this),this._addName(this)},onFrame:function(a){this.anim={func:a}},start:function(){if(!this.animRunning){var a=Kinetic.Animation;a._addAnimation(this.anim),a._handleAnimation(),this.animRunning=!0}},stop:function(){Kinetic.Animation._removeAnimation(this.anim),this.animRunning=!1},draw:function(a){this._draw(a)},setSize:function(){var a=Kinetic.Type._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}},clear:function(){var a=this.children;for(var b=0;b<a.length;b++)a[b].clear()},toJSON:function(){function b(c){var d={};d.attrs={};for(var e in c.attrs){var f=c.attrs[e];!a._isFunction(f)&&!a._isElement(f)&&!a._hasMethods(f)&&(d.attrs[e]=f)}d.nodeType=c.nodeType,d.shapeType=c.shapeType;if(c.nodeType!=="Shape"){d.children=[];var g=c.getChildren();for(var h=0;h<g.length;h++){var i=g[h];d.children.push(b(i))}}return d}var a=Kinetic.Type;return JSON.stringify(b(this))},reset:function(){this.removeChildren(),this._setStageDefaultProperties(),this.setAttrs(this.defaultNodeAttrs)},load:function(a){function b(a,c){var d=c.children;if(d!==undefined)for(var e=0;e<d.length;e++){var f=d[e],g;f.nodeType==="Shape"?f.shapeType===undefined?g="Shape":g=f.shapeType:g=f.nodeType;var h=new Kinetic[g](f.attrs);a.add(h),b(h,f)}}this.reset();var c=JSON.parse(a);this.attrs=c.attrs,b(this,c),this.draw()},getMousePosition:function(a){return this.mousePos},getTouchPosition:function(a){return this.touchPos},getUserPosition:function(a){return this.getTouchPosition()||this.getMousePosition()},getContainer:function(){return this.attrs.container},getStage:function(){return this},getDOM:function(){return this.content},toDataURL:function(a,b,c){function h(e){var i=g[e],j;try{j=i.getCanvas().toDataURL(b,c)}catch(k){j=i.getCanvas().toDataURL()}var l=new Image;l.onload=function(){f.drawImage(l,0,0);if(e<g.length-1)h(e+1);else try{a(d.getCanvas().toDataURL(b,c))}catch(i){a(d.getCanvas().toDataURL())}},l.src=j}var d=new Kinetic.Layer;d.getCanvas().width=this.attrs.width,d.getCanvas().height=this.attrs.height,d.parent=this;var e=d.getCanvas(),f=d.getContext(),g=this.children;h(0)},toImage:function(a){this.toDataURL(function(b){Kinetic.Type._getImage(b,function(b){a(b)})})},_resizeDOM:function(){var a=this.attrs.width,b=this.attrs.height;this.content.style.width=a+"px",this.content.style.height=b+"px",this.bufferLayer.getCanvas().width=a,this.bufferLayer.getCanvas().height=b,this.pathLayer.getCanvas().width=a,this.pathLayer.getCanvas().height=b;var c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.getCanvas().width=a,e.getCanvas().height=b,e.draw()}},_remove:function(a){try{this.content.removeChild(a.canvas)}catch(b){}},_add:function(a){a.canvas.width=this.attrs.width,a.canvas.height=this.attrs.height,a.draw(),this.content.appendChild(a.canvas),a.lastDrawTime=0},_detectEvent:function(a,b){var c=Kinetic.Global.drag.moving,d=Kinetic.Global,e=this.getUserPosition(),f=a.eventListeners,g=this;this.targetShape&&a._id===this.targetShape._id&&(this.targetFound=!0);if(a.isVisible()&&e!==undefined&&a.intersects(e)){if(!c&&this.mouseDown)return this.mouseDown=!1,this.clickStart=!0,a._handleEvent("mousedown",b),!0;if(this.mouseUp)return this.mouseUp=!1,a._handleEvent("mouseup",b),this.clickStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvent("click",b),this.inDoubleClickWindow&&a._handleEvent("dblclick",b),this.inDoubleClickWindow=!0,setTimeout(function(){g.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(!c&&this.touchStart&&!this.touchMove)return this.touchStart=!1,this.tapStart=!0,a._handleEvent("touchstart",b),!0;if(this.touchEnd)return this.touchEnd=!1,a._handleEvent("touchend",b),this.tapStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvent("tap",b),this.inDoubleClickWindow&&a._handleEvent("dbltap",b),this.inDoubleClickWindow=!0,setTimeout(function(){g.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(!c&&this.touchMove)return a._handleEvent("touchmove",b),!0;if(!c&&this._isNewTarget(a,b))return this.mouseoutShape&&(this.mouseoverShape=a,this.mouseoutShape._handleEvent("mouseout",b),this.mouseoverShape=undefined),a._handleEvent("mouseover",b),this._setTarget(a),!0;if(!c&&this.mouseMove)return a._handleEvent("mousemove",b),!0}else if(!c&&this.targetShape&&this.targetShape._id===a._id)return this._setTarget(undefined),this.mouseoutShape=a,!0;return!1},_setTarget:function(a){this.targetShape=a,this.targetFound=!0},_isNewTarget:function(a,b){if(!this.targetShape||!this.targetFound&&a._id!==this.targetShape._id){if(this.targetShape){var c=this.targetShape.eventListeners;c&&(this.mouseoutShape=this.targetShape)}return!0}return!1},_traverseChildren:function(a,b){var c=a.children;for(var d=c.length-1;d>=0;d--){var e=c[d];if(e.getListening())if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=new Date,c=b.getTime();this.lastEventTime=c;var d=Kinetic.Global;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var e=!1;for(var f=this.children.length-1;f>=0;f--){var g=this.children[f];if(g.isVisible()&&f>=0&&g.getListening()&&this._traverseChildren(g,a)){e=!0;break}}!e&&this.mouseoutShape&&(this.mouseoutShape._handleEvent("mouseout",a),this.mouseoutShape=undefined)},_bindContentEvents:function(){var a=Kinetic.Global,b=this,c=["mousedown","mousemove","mouseup","mouseover","mouseout","touchstart","touchmove","touchend"];for(var d=0;d<c.length;d++){var e=c[d];(function(){var a=e;b.content.addEventListener(a,function(c){b["_"+a](c)},!1)})()}},_mouseover:function(a){this._handleStageEvent(a)},_mouseout:function(a){var b=this.targetShape;b&&(b._handleEvent("mouseout",a),this.targetShape=undefined),this.mousePos=undefined,this._endDrag(a)},_mousemove:function(a){var b=this.attrs.throttle,c=new Date,d=c.getTime(),e=d-this.lastEventTime,f=1e3/b;if(e>=f||b>200)this.mouseDown=!1,this.mouseUp=!1,this.mouseMove=!0,this._handleStageEvent(a);this._startDrag(a)},_mousedown:function(a){this.mouseDown=!0,this.mouseUp=!1,this.mouseMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_mouseup:function(a){this.mouseDown=!1,this.mouseUp=!0,this.mouseMove=!1,this._handleStageEvent(a),this.clickStart=!1,this._endDrag(a)},_touchstart:function(a){a.preventDefault(),this.touchStart=!0,this.touchEnd=!1,this.touchMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_touchend:function(a){this.touchStart=!1,this.touchEnd=!0,this.touchMove=!1,this._handleStageEvent(a),this.tapStart=!1,this._endDrag(a)},_touchmove:function(a){var b=this,c=this.attrs.throttle,d=new Date,e=d.getTime(),f=e-this.lastEventTime,g=1e3/c;if(f>=g||c>200)a.preventDefault(),b.touchEnd=!1,b.touchMove=!0,b._handleStageEvent(a);this._startDrag(a)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_modifyPathContext:function(a){a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.Global;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvent("dragend",a)),b.drag.node=undefined},_startDrag:function(a){var b=this,c=Kinetic.Global,d=c.drag.node;if(d){var e=b.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:d.attrs.x,y:d.attrs.y},i={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&i.x<g.left&&(i.x=g.left),g.right!==undefined&&i.x>g.right&&(i.x=g.right),g.top!==undefined&&i.y<g.top&&(i.y=g.top),g.bottom!==undefined&&i.y>g.bottom&&(i.y=g.bottom),d.setAbsolutePosition(i),f==="horizontal"?d.attrs.y=h.y:f==="vertical"&&(d.attrs.x=h.x),c.drag.node.nodeType==="Stage"?c.drag.node.draw():c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvent("dragstart",a)),c.drag.node._handleEvent("dragmove",a)}},_buildDOM:function(){this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height),this._resizeDOM()},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a!==undefined&&delete this.ids[a]},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a,b){if(a!==undefined){var c=this.names[a];if(c!==undefined){for(var d=0;d<c.length;d++){var e=c[d];e._id===b&&c.splice(d,1)}c.length===0&&delete this.names[a]}}},_onContent:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d];this.content.addEventListener(e,b,!1)}},_setStageDefaultProperties:function(){this.nodeType="Stage",this.lastEventTime=0,this.dblClickWindow=400,this.targetShape=undefined,this.targetFound=!1,this.mouseoverShape=undefined,this.mouseoutShape=undefined,this.mousePos=undefined,this.mouseDown=!1,this.mouseUp=!1,this.mouseMove=!1,this.clickStart=!1,this.touchPos=undefined,this.touchStart=!1,this.touchEnd=!1,this.touchMove=!1,this.tapStart=!1,this.ids={},this.names={},this.anim=undefined,this.animRunning=!1},_draw:function(a){this._drawChildren(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Stage,["width","height","throttle"]),Kinetic.Layer=Kinetic.Container.extend({init:function(a){this.setDefaultAttrs({throttle:80,clearBeforeDraw:!0}),this.nodeType="Layer",this.lastDrawTime=0,this.beforeDrawFunc=undefined,this.afterDrawFunc=undefined,this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",this._super(a)},draw:function(a){var b=this.attrs.throttle,c=new Date,d=c.getTime(),e=d-this.lastDrawTime,f=1e3/b;if(e>=f||b>200)this._draw(a),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var g=this;this.drawTimeout=setTimeout(function(){g.draw(a)},17)}},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},toDataURL:function(a,b){try{return this.getCanvas().toDataURL(a,b)}catch(c){return this.getCanvas().toDataURL()}},_draw:function(a){var b=new Date,c=b.getTime();this.lastDrawTime=c,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this);if(this.attrs.clearBeforeDraw){var d=a?a:this;d.clear()}this.isVisible()&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren(a)),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}}),Kinetic.Node.addGettersSetters(Kinetic.Layer,["clearBeforeDraw","throttle"]),Kinetic.Group=Kinetic.Container.extend({init:function(a){this.nodeType="Group",this._super(a)},draw:function(a){this._draw(a)},_draw:function(a){this.attrs.visible&&this._drawChildren(a)}}),Kinetic.Shape=Kinetic.Node.extend({init:function(a){this.setDefaultAttrs({detectionType:"path"}),this.nodeType="Shape",this.appliedShadow=!1,this._super(a)},getContext:function(){return this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=Kinetic.Global,b=!1,c=this.getContext();if(this.attrs.stroke||this.attrs.strokeWidth){c.save(),this.attrs.shadow&&!this.appliedShadow&&(b=this._applyShadow());var d=this.attrs.stroke?this.attrs.stroke:"black",e=this.attrs.strokeWidth?this.attrs.strokeWidth:2;c.lineWidth=e,c.strokeStyle=d,c.stroke(),c.restore()}b&&this.stroke()},fill:function(){var a=!1,b=this.getContext();b.save();var c=this.attrs.fill;if(c){this.attrs.shadow&&!this.appliedShadow&&(a=this._applyShadow());var d=c.start,e=c.end,f=null;if(typeof c=="string")f=this.attrs.fill,b.fillStyle=f,b.fill();else if(c.image){var g=c.repeat?c.repeat:"repeat";f=b.createPattern(c.image,g),b.save(),c.scale&&b.scale(c.scale.x,c.scale.y),c.offset&&b.translate(c.offset.x,c.offset.y),b.fillStyle=f,b.fill(),b.restore()}else if(!d.radius&&!e.radius){var b=this.getContext(),h=b.createLinearGradient(d.x,d.y,e.x,e.y),i=c.colorStops;for(var j=0;j<i.length;j+=2)h.addColorStop(i[j],i[j+1]);f=h,b.fillStyle=f,b.fill()}else if(!d.radius&&d.radius!==0||!e.radius&&e.radius!==0)f="black",b.fillStyle=f,b.fill();else{var b=this.getContext(),h=b.createRadialGradient(d.x,d.y,d.radius,e.x,e.y,e.radius),i=c.colorStops;for(var j=0;j<i.length;j+=2)h.addColorStop(i[j],i[j+1]);f=h,b.fillStyle=f,b.fill()}}b.restore(),a&&this.fill()},fillText:function(a){var b=!1,c=this.getContext();c.save(),this.attrs.textFill&&(this.attrs.shadow&&!this.appliedShadow&&(b=this._applyShadow()),c.fillStyle=this.attrs.textFill,c.fillText(a,0,0
-)),c.restore(),b&&this.fillText(a,0,0)},strokeText:function(a){var b=!1,c=this.getContext();c.save();if(this.attrs.textStroke||this.attrs.textStrokeWidth)this.attrs.shadow&&!this.appliedShadow&&(b=this._applyShadow()),this.attrs.textStroke?!this.attrs.textStrokeWidth&&this.attrs.textStrokeWidth!==0&&(this.attrs.textStrokeWidth=2):this.attrs.textStroke="black",c.lineWidth=this.attrs.textStrokeWidth,c.strokeStyle=this.attrs.textStroke,c.strokeText(a,0,0);c.restore(),b&&this.strokeText(a,0,0)},drawImage:function(){var a=!1,b=this.getContext();b.save();var c=Array.prototype.slice.call(arguments);if(c.length===5||c.length===9){this.attrs.shadow&&!this.appliedShadow&&(a=this._applyShadow());switch(c.length){case 5:b.drawImage(c[0],c[1],c[2],c[3],c[4]);break;case 9:b.drawImage(c[0],c[1],c[2],c[3],c[4],c[5],c[6],c[7],c[8])}}b.restore(),a&&this.drawImage.apply(this,c)},applyLineJoin:function(){var a=this.getContext();this.attrs.lineJoin&&(a.lineJoin=this.attrs.lineJoin)},_applyShadow:function(){var a=this.getContext(),b=this.attrs.shadow;if(b){var c=this.getAbsoluteAlpha(),d=b.color?b.color:"black",e=b.blur?b.blur:5,f=b.offset?b.offset:{x:0,y:0};return b.alpha&&(a.globalAlpha=b.alpha*c),a.shadowColor=d,a.shadowBlur=e,a.shadowOffsetX=f.x,a.shadowOffsetY=f.y,this.appliedShadow=!0,!0}return!1},intersects:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.getStage();if(this.attrs.detectionType==="path"){var c=b.pathLayer,d=c.getContext();return this._draw(c),d.isPointInPath(a.x,a.y)}if(this.imageData){var e=b.attrs.width,f=this.imageData.data[(e*a.y+a.x)*4+3];return f}return!1},_draw:function(a){if(a&&this.attrs.drawFunc){var b=a.getStage(),c=a.getContext(),d=[],e=this.parent;d.unshift(this);while(e)d.unshift(e),e=e.parent;c.save();for(var f=0;f<d.length;f++){var g=d[f],h=g.getTransform(),i=h.getMatrix();c.transform(i[0],i[1],i[2],i[3],i[4],i[5])}this.tempLayer=a;var j=this.getAbsoluteAlpha();j!==1&&(c.globalAlpha=j),this.applyLineJoin(),this.appliedShadow=!1,this.attrs.drawFunc.call(this),c.restore()}}}),Kinetic.Node.addGettersSetters(Kinetic.Shape,["fill","stroke","lineJoin","strokeWidth","shadow","drawFunc","filter"]),Kinetic.Rect=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({width:0,height:0,cornerRadius:0}),this.shapeType="Rect",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.attrs.cornerRadius===0?a.rect(0,0,this.attrs.width,this.attrs.height):(a.moveTo(this.attrs.cornerRadius,0),a.lineTo(this.attrs.width-this.attrs.cornerRadius,0),a.arc(this.attrs.width-this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI*3/2,0,!1),a.lineTo(this.attrs.width,this.attrs.height-this.attrs.cornerRadius),a.arc(this.attrs.width-this.attrs.cornerRadius,this.attrs.height-this.attrs.cornerRadius,this.attrs.cornerRadius,0,Math.PI/2,!1),a.lineTo(this.attrs.cornerRadius,this.attrs.height),a.arc(this.attrs.cornerRadius,this.attrs.height-this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI/2,Math.PI,!1),a.lineTo(0,this.attrs.cornerRadius),a.arc(this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI,Math.PI*3/2,!1)),a.closePath(),this.fill(),this.stroke()},this._super(a)},setSize:function(){var a=Kinetic.Type._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}}}),Kinetic.Node.addGettersSetters(Kinetic.Rect,["width","height","cornerRadius"]),Kinetic.Ellipse=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({radius:{x:0,y:0}}),this.shapeType="Ellipse",a.drawFunc=function(){var a=this.getCanvas(),b=this.getContext(),c=this.getRadius();b.beginPath(),b.save(),c.x!==c.y&&b.scale(1,c.y/c.x),b.arc(0,0,c.x,0,Math.PI*2,!0),b.restore(),b.closePath(),this.fill(),this.stroke()},this._super(a),this._convertRadius();var b=this;this.on("radiusChange.kinetic",function(){b._convertRadius()})},_convertRadius:function(){var a=Kinetic.Type,b=this.getRadius();if(a._isObject(b))return!1;this.attrs.radius=a._getXY(b)}}),Kinetic.Circle=Kinetic.Ellipse,Kinetic.Node.addGettersSetters(Kinetic.Ellipse,["radius"]),Kinetic.Image=Kinetic.Shape.extend({init:function(a){this.shapeType="Image",a.drawFunc=function(){if(!!this.attrs.image){var a=this.getWidth(),b=this.getHeight(),c=this.getCanvas(),d=this.getContext();d.beginPath(),d.rect(0,0,a,b),d.closePath(),this.fill(),this.stroke();if(this.attrs.crop&&this.attrs.crop.width&&this.attrs.crop.height){var e=this.attrs.crop.x?this.attrs.crop.x:0,f=this.attrs.crop.y?this.attrs.crop.y:0,g=this.attrs.crop.width,h=this.attrs.crop.height;this.drawImage(this.attrs.image,e,f,g,h,0,0,a,b)}else this.drawImage(this.attrs.image,0,0,a,b)}},this._super(a);var b=this;this.on("filterChange",function(){b._applyFilter()})},setSize:function(){var a=Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}},getWidth:function(){return this.attrs.width?this.attrs.width:this.attrs.image?this.attrs.image.width:0},getHeight:function(){return this.attrs.height?this.attrs.height:this.attrs.image?this.attrs.image.height:0},applyFilter:function(a){try{var b=this.getX(),c=this.getY(),d=this.getRotation(),e=this.getScale().x,f=this.getScale().y,g=this.getOffset().x,h=this.getOffset().y;this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scale.x=1,this.attrs.scale.y=1,this.attrs.offset.x=0,this.attrs.offset.y=0,this.saveImageData(),this.attrs.x=b,this.attrs.y=c,this.attrs.rotation=d,this.attrs.scale.x=e,this.attrs.scale.y=f,this.attrs.offset.x=g,this.attrs.offset.y=h,a.filter.call(this,a);var i=this;Kinetic.Type._getImage(this.getImageData(),function(b){i.setImage(b),a.callback&&a.callback()})}catch(j){Kinetic.Global.warn("Unable to apply filter.")}}}),Kinetic.Node.addGettersSetters(Kinetic.Image,["image","crop","filter"]),Kinetic.Node.addSetters(Kinetic.Image,["width","height"]),Kinetic.Sprite=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({index:0,frameRate:17}),a.drawFunc=function(){if(!!this.attrs.image){var a=this.getContext(),b=this.attrs.animation,c=this.attrs.index,d=this.attrs.animations[b][c];a.beginPath(),a.rect(0,0,d.width,d.height),a.closePath(),this.drawImage(this.attrs.image,d.x,d.y,d.width,d.height,0,0,d.width,d.height)}},this._super(a);var b=this;this.on("animationChange.kinetic",function(){b.setIndex(0)})},start:function(){var a=this,b=this.getLayer(),c=Kinetic.Animation;this.anim&&(c._removeAnimation(this.anim),this.anim=null),this.anim={node:b},c._addAnimation(this.anim),this.interval=setInterval(function(){var b=a.attrs.index;a._updateIndex(),a.afterFrameFunc&&b===a.afterFrameIndex&&a.afterFrameFunc()},1e3/this.attrs.frameRate),c._handleAnimation()},stop:function(){var a=Kinetic.Animation;this.anim&&(a._removeAnimation(this.anim),this.anim=null),clearInterval(this.interval)},afterFrame:function(a,b){this.afterFrameIndex=a,this.afterFrameFunc=b},_updateIndex:function(){var a=this.attrs.index,b=this.attrs.animation;a<this.attrs.animations[b].length-1?this.attrs.index++:this.attrs.index=0}}),Kinetic.Node.addGettersSetters(Kinetic.Sprite,["animation","animations","index"]),Kinetic.Polygon=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({points:[]}),this.shapeType="Polygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var b=1;b<this.attrs.points.length;b++)a.lineTo(this.attrs.points[b].x,this.attrs.points[b].y);a.closePath(),this.fill(),this.stroke()},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Polygon,["points"]),Kinetic.RegularPolygon=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({radius:0,sides:0}),this.shapeType="RegularPolygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),a.moveTo(0,0-this.attrs.radius);for(var b=1;b<this.attrs.sides;b++){var c=this.attrs.radius*Math.sin(b*2*Math.PI/this.attrs.sides),d=-1*this.attrs.radius*Math.cos(b*2*Math.PI/this.attrs.sides);a.lineTo(c,d)}a.closePath(),this.fill(),this.stroke()},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.RegularPolygon,["radius","sides"]),Kinetic.Star=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({numPoints:0,innerRadius:0,outerRadius:0}),this.shapeType="Star",a.drawFunc=function(){var a=this.getContext();a.beginPath(),a.moveTo(0,0-this.attrs.outerRadius);for(var b=1;b<this.attrs.numPoints*2;b++){var c=b%2===0?this.attrs.outerRadius:this.attrs.innerRadius,d=c*Math.sin(b*Math.PI/this.attrs.numPoints),e=-1*c*Math.cos(b*Math.PI/this.attrs.numPoints);a.lineTo(d,e)}a.closePath(),this.fill(),this.stroke()},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Star,["numPoints","innerRadius","outerRadius"]),Kinetic.Text=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({fontFamily:"Calibri",text:"",fontSize:12,align:"left",verticalAlign:"top",fontStyle:"normal",padding:0,width:"auto",height:"auto",detectionType:"path",cornerRadius:0,lineHeight:1.2}),this.dummyCanvas=document.createElement("canvas"),this.shapeType="Text",a.drawFunc=function(){var a=this.getContext();a.beginPath();var b=this.getBoxWidth(),c=this.getBoxHeight();this.attrs.cornerRadius===0?a.rect(0,0,b,c):(a.moveTo(this.attrs.cornerRadius,0),a.lineTo(b-this.attrs.cornerRadius,0),a.arc(b-this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI*3/2,0,!1),a.lineTo(b,c-this.attrs.cornerRadius),a.arc(b-this.attrs.cornerRadius,c-this.attrs.cornerRadius,this.attrs.cornerRadius,0,Math.PI/2,!1),a.lineTo(this.attrs.cornerRadius,c),a.arc(this.attrs.cornerRadius,c-this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI/2,Math.PI,!1),a.lineTo(0,this.attrs.cornerRadius),a.arc(this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI,Math.PI*3/2,!1)),a.closePath(),this.fill(),this.stroke();var d=this.attrs.padding,e=this.attrs.lineHeight*this.getTextHeight(),f=this.textArr;a.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily,a.textBaseline="middle",a.textAlign="left",a.save(),a.translate(d,0),a.translate(0,d+this.getTextHeight()/2);for(var g=0;g<f.length;g++){var h=f[g];a.save(),this.attrs.align==="right"?a.translate(this.getBoxWidth()-this._getTextSize(h).width-d*2,0):this.attrs.align==="center"&&a.translate((this.getBoxWidth()-this._getTextSize(h).width-d*2)/2,0),this.fillText(h),this.strokeText(h),a.restore(),a.translate(0,e)}a.restore()},this._super(a);var b=["width","height","padding","text","textStroke","textStrokeWidth"],c=this;for(var d=0;d<b.length;d++){var e=b[d];this.on(e+"Change.kinetic",c._setTextData)}c._setTextData()},getBoxWidth:function(){return this.attrs.width==="auto"?this.getTextWidth()+this.attrs.padding*2:this.attrs.width},getBoxHeight:function(){return this.attrs.height==="auto"?this.getTextHeight()*this.textArr.length*this.attrs.lineHeight+this.attrs.padding*2:this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b=this.dummyCanvas,c=b.getContext("2d");c.save(),c.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily;var d=c.measureText(a);return c.restore(),{width:d.width,height:parseInt(this.attrs.fontSize,10)}},_setTextData:function(){var a=this.attrs.text.split(""),b=[],c=0,d=!0;this.textWidth=0,this.textHeight=this._getTextSize(this.attrs.text).height;var e=this.attrs.lineHeight*this.textHeight;while(a.length>0&&d&&(this.attrs.height==="auto"||e*(c+1)<this.attrs.height-this.attrs.padding*2)){var f=0,g=undefined;d=!1;while(f<a.length){if(a.indexOf("\n")===f){a.splice(f,1),g=a.splice(0,f).join("");break}var h=a.slice(0,f);if(this.attrs.width!=="auto"&&this._getTextSize(h.join("")).width>this.attrs.width-this.attrs.padding*2){if(f==0)break;var i=h.lastIndexOf(" "),j=h.lastIndexOf("-"),k=Math.max(i,j);if(k>=0){g=a.splice(0,1+k).join("");break}g=a.splice(0,f).join("");break}f++,f===a.length&&(g=a.splice(0,f).join(""))}this.textWidth=Math.max(this.textWidth,this._getTextSize(g).width),g!==undefined&&(b.push(g),d=!0),c++}this.textArr=b}}),Kinetic.Node.addGettersSetters(Kinetic.Text,["fontFamily","fontSize","fontStyle","textFill","textStroke","textStrokeWidth","padding","align","lineHeight","text","width","height","cornerRadius","fill","stroke","strokeWidth","shadow"]),Kinetic.Line=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({points:[],lineCap:"butt",dashArray:[],detectionType:"pixel"}),this.shapeType="Line",a.drawFunc=function(){var a=this.getContext(),b={};a.beginPath(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var c=1;c<this.attrs.points.length;c++){var d=this.attrs.points[c].x,e=this.attrs.points[c].y;if(this.attrs.dashArray.length>0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.stroke()},this._super(a)},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}}),Kinetic.Node.addGettersSetters(Kinetic.Line,["dashArray","lineCap","points"]),Kinetic.Path=Kinetic.Shape.extend({init:function(a){this.shapeType="Path",this.dataArray=[];var b=this;a.drawFunc=function(){var a=this.getContext(),b=this.dataArray;a.beginPath();for(var c=0;c<b.length;c++){var d=b[c].command,e=b[c].points;switch(d){case"L":a.lineTo(e[0],e[1]);break;case"M":a.moveTo(e[0],e[1]);break;case"C":a.bezierCurveTo(e[0],e[1],e[2],e[3],e[4],e[5]);break;case"Q":a.quadraticCurveTo(e[0],e[1],e[2],e[3]);break;case"A":var f=e[0],g=e[1],h=e[2],i=e[3],j=e[4],k=e[5],l=e[6],m=e[7],n=h>i?h:i,o=h>i?1:h/i,p=h>i?i/h:1;a.translate(f,g),a.rotate(l),a.scale(o,p),a.arc(0,0,n,j,j+k,1-m),a.scale(1/o,1/p),a.rotate(-l),a.translate(-f,-g);break;case"z":a.closePath()}}this.fill(),this.stroke()},this._super(a),this.dataArray=this._getDataArray(),this.on("dataChange",function(){b.dataArray=b._getDataArray()})},_getDataArray:function(){var a=this.attrs.data;if(!this.attrs.data)return[];var b=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];a=a.replace(new RegExp(" ","g"),",");for(var c=0;c<b.length;c++)a=a.replace(new RegExp(b[c],"g"),"|"+b[c]);var d=a.split("|"),e=[],f=0,g=0;for(var c=1;c<d.length;c++){var h=d[c],i=h.charAt(0);h=h.slice(1),h=h.replace(new RegExp(",-","g"),"-"),h=h.replace(new RegExp("-","g"),",-");var j=h.split(",");j.length>0&&j[0]===""&&j.shift();for(var k=0;k<j.length;k++)j[k]=parseFloat(j[k]);while(j.length>0){if(isNaN(j[0]))break;var l=undefined,m=[];switch(i){case"l":f+=j.shift(),g+=j.shift(),l="L",m.push(f,g);break;case"L":f=j.shift(),g=j.shift(),m.push(f,g);break;case"m":f+=j.shift(),g+=j.shift(),l="M",m.push(f,g),i="l";break;case"M":f=j.shift(),g=j.shift(),l="M",m.push(f,g),i="L";break;case"h":f+=j.shift(),l="L",m.push(f,g);break;case"H":f=j.shift(),l="L",m.push(f,g);break;case"v":g+=j.shift(),l="L",m.push(f,g);break;case"V":g=j.shift(),l="L",m.push(f,g);break;case"C":m.push(j.shift(),j.shift(),j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"c":m.push(f+j.shift(),g+j.shift(),f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"S":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,j.shift(),j.shift()),f=j.shift(),g=j.shift(),l="C",m.push(f,g);break;case"s":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"Q":m.push(j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"q":m.push(f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="Q",m.push(f,g);break;case"T":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f=j.shift(),g=j.shift(),l="Q",m.push(n,o,f,g);break;case"t":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f+=j.shift(),g+=j.shift(),l="Q",m.push(n,o,f,g);break;case"A":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f=j.shift(),g=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s);break;case"a":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f+=j.shift(),g+=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s)}e.push({command:l||i,points:m})}(i==="z"||i==="Z")&&e.push({command:"z",points:[]})}return e},_convertEndpointToCenterParameterization:function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e==f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]<a[1]*b[0]?-1:1)*Math.acos(t(a,b))},v=u([1,0],[(k-o)/g,(l-p)/h]),w=[(k-o)/g,(l-p)/h],x=[(-1*k-o)/g,(-1*l-p)/h],y=u(w,x);return t(w,x)<=-1&&(y=Math.PI),t(w,x)>=1&&(y=0),f==0&&y>0&&(y-=2*Math.PI),f==1&&y<0&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]}}),Kinetic.Node.addGettersSetters(Kinetic.Path,["data"]),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b,e,f){for(var g in a)g!=="duration"&&g!=="easing"&&g!=="callback"&&(Kinetic.Type._isObject(a[g])?(e[g]={},d(a[g],b[g],e[g],f)):c._add(c._getTween(b,g,a[g],e,f)))}this.node=a,this.config=b,this.tweens=[];var c=this,e={};d(b,a.attrs,e,e);var f=0;for(var g=0;g<this.tweens.length;g++){var h=this.tweens[g];h.onFinished=function(){f++,f>=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},_add:function(a){this.tweens.push(a)},_getTween:function(a,b,c,d,e){var f=this.config,g=this.node,h=f.easing;h===undefined&&(h="linear");var i=new Kinetic.Tween(g,function(a){d[b]=a,g.setAttrs(e)},Kinetic.Tweens[h],a[b],c,f.duration);return i}},Kinetic.Tween=function(a,b,c,d,e,f){this._listeners=[],this.addListener(this),this.obj=a,this.propFunc=b,this.begin=d,this._pos=d,this.setDuration(f),this.isPlaying=!1,this._change=0,this.prevTime=0,this.prevPos=0,this.looping=!1,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.name="",this.func=c,this.setFinish(e)},Kinetic.Tween.prototype={setTime:function(a){this.prevTime=this._time,a>this.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!==undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b<arguments.length;b++)a.push(arguments[b]);var c=a.shift(),d=this._listeners,e=d.length;for(var b=0;b<e;b++)d[b][c]&&d[b][c].apply(d[b],a)},fixTime:function(){this._startTime=this.getTimer()-this._time*1e3},getTimer:function(){return(new Date).getTime()-this._time}},Kinetic.Tweens={"back-ease-in":function(a,b,c,d,e,f){var g=1.70158;return c*(a/=d)*a*((g+1)*a-g)+b},"back-ease-out":function(a,b,c,d,e,f){var g=1.70158;return c*((a=a/d-1)*a*((g+1)*a+g)+1)+b},"back-ease-in-out":function(a,b,c,d,e,f){var g=1.70158;return(a/=d/2)<1?c/2*a*a*(((g*=1.525)+1)*a-g)+b:c/2*((a-=2)*a*(((g*=1.525)+1)*a+g)+2)+b},"elastic-ease-in":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),-(e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f))+b)},"elastic-ease-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),e*Math.pow(2,-10*a)*Math.sin((a*d-g)*2*Math.PI/f)+c+b)},"elastic-ease-in-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d/2)==2?b+c:(f||(f=d*.3*1.5),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),a<1?-0.5*e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)*.5+c+b)},"bounce-ease-out":function(a,b,c,d){return(a/=d)<1/2.75?c*7.5625*a*a+b:a<2/2.75?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:a<2.5/2.75?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},"bounce-ease-in":function(a,b,c,d){return c-Kinetic.Tweens["bounce-ease-out"](d-a,0,c,d)+b},"bounce-ease-in-out":function(a,b,c,d){return a<d/2?Kinetic.Tweens["bounce-ease-in"](a*2,0,c,d)*.5+b:Kinetic.Tweens["bounce-ease-out"](a*2-d,0,c,d)*.5+c*.5+b},"ease-in":function(a,b,c,d){return c*(a/=d)*a+b},"ease-out":function(a,b,c,d){return-c*(a/=d)*(a-2)+b},"ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},"strong-ease-in":function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},"strong-ease-out":function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},"strong-ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},linear:function(a,b,c,d){return c*a/d+b}},Kinetic.Filters.Grayscale=function(){var a=this.imageData.data;for(var b=0;b<a.length;b+=4){var c=.34*a[b]+.5*a[b+1]+.16*a[b+2];a[b]=c,a[b+1]=c,a[b+2]=c}};
+var Kinetic={};Kinetic.Filters={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],stages:[],idCounter:0,tempNodes:[],maxDragTimeInterval:20,drag:{moving:!1,offset:{x:0,y:0},lastDrawTime:0},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},_pullNodes:function(a){var b=this.tempNodes;for(var c=0;c<b.length;c++){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this.tempNodes.splice(c,1),c-=1)}}},Kinetic.Type={_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)=="[object Array]"},_isNumber:function(a){return Object.prototype.toString.call(a)=="[object Number]"},_isString:function(a){return Object.prototype.toString.call(a)=="[object String]"},_hasMethods:function(a){var b=[];for(var c in a)this._isFunction(a[c])&&b.push(c);return b.length>0},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];if(this._isNumber(b))return{x:b,y:b};if(this._isArray(b))return{x:b[0],y:b[1]};if(this._isObject(b))return b}else if(a.length>=2)return{x:a[0],y:a[1]}}else if(this._isObject(a))return a;return{x:0,y:0}},_getSize:function(a){if(this._isNumber(a))return{width:a,height:a};if(this._isArray(a))if(a.length===1){var b=a[0];if(this._isNumber(b))return{width:b,height:b};if(this._isArray(b)){if(b.length>=4)return{width:b[2],height:b[3]};if(b.length>=2)return{width:b[0],height:b[1]}}else if(this._isObject(b))return b}else{if(a.length>=4)return{width:a[2],height:a[3]};if(a.length>=2)return{width:a[0],height:a[1]}}else if(this._isObject(a))return a;return{width:0,height:0}},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c<a.length;c+=2)b.push({x:a[c],y:a[c+1]});return b},_getImage:function(a,b){if(!a)b(null);else if(this._isElement(a))b(a);else if(this._isString(a)){var c=new Image;c.onload=function(){b(c)},c.src=a}else if(a.data){var d=document.createElement("canvas");d.width=a.width,d.height=a.height;var e=d.getContext("2d");e.putImageData(a,0,0);var f=d.toDataURL(),c=new Image;c.onload=function(){b(c)},c.src=f}else b(null)}},Kinetic.Canvas=function(a,b){this.element=document.createElement("canvas"),this.context=this.element.getContext("2d"),this.element.width=a,this.element.height=b},Kinetic.Canvas.prototype={clear:function(){var a=this.getContext(),b=this.getElement();a.clearRect(0,0,b.width,b.height)},getElement:function(){return this.element},getContext:function(){return this.context},setWidth:function(a){this.element.width=a},setHeight:function(a){this.element.height=a},setSize:function(a,b){this.setWidth(a),this.setHeight(b)},strip:function(){var a=this.context;a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.strokeText=function(){}}},function(){var a=!1;Kinetic.Class=function(){},Kinetic.Class.extend=function(b){function f(){!a&&this.init&&this.init.apply(this,arguments)}var c=this.prototype;a=!0;var d=new this;a=!1;for(var e in b)d[e]=typeof b[e]=="function"&&typeof c[e]=="function"?function(a,b){return function(){var d=this._super;this._super=c[a];var e=b.apply(this,arguments);return this._super=d,e}}(e,b[e]):b[e];return f.prototype=d,f.prototype.constructor=f,f.extend=arguments.callee,f}}(),Kinetic.Animation={animations:[],animIdCounter:0,animRunning:!1,frame:{time:0,timeDiff:0,lastTime:0},_addAnimation:function(a){a.id=this.animIdCounter++,this.animations.push(a)},_removeAnimation:function(a){var b=a.id,c=this.animations;for(var d=0;d<c.length;d++)if(c[d].id===b)return this.animations.splice(d,1),!1},_runFrames:function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];c.node&&c.node._id!==undefined&&(a[c.node._id]=c.node),c.func&&c.func(this.frame)}for(var d in a)a[d].draw()},_updateFrameObject:function(){var a=new Date,b=a.getTime();this.frame.lastTime===0?this.frame.lastTime=b:(this.frame.timeDiff=b-this.frame.lastTime,this.frame.lastTime=b,this.frame.time+=this.frame.timeDiff)},_animationLoop:function(){if(this.animations.length>0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())}},requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),Kinetic.Node=Kinetic.Class.extend({init:function(a){this.defaultNodeAttrs={visible:!0,listening:!0,name:undefined,alpha:1,x:0,y:0,scale:{x:1,y:1},rotation:0,offset:{x:0,y:0},dragConstraint:"none",dragBounds:{},draggable:!1},this.setDefaultAttrs(this.defaultNodeAttrs),this.eventListeners={},this.setAttrs(a),this.on("draggableChange.kinetic",function(){this._onDraggableChange()});var b=this;this.on("idChange.kinetic",function(a){var c=b.getStage();c&&(c._removeId(a.oldVal),c._addId(b))}),this.on("nameChange.kinetic",function(a){var c=b.getStage();c&&(c._removeName(a.oldVal,b._id),c._addName(b))}),this._onDraggableChange()},on:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d],f=e,g=f.split("."),h=g[0],i=g.length>1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c<b.length;c++){var d=b[c],e=d,f=e.split("."),g=f[0];if(this.eventListeners[g]&&f.length>1){var h=f[1];for(var i=0;i<this.eventListeners[g].length;i++)if(this.eventListeners[g][i].name===h){this.eventListeners[g].splice(i,1);if(this.eventListeners[g].length===0){delete this.eventListeners[g];break}i--}}else delete this.eventListeners[g]}},getAttrs:function(){return this.attrs},setDefaultAttrs:function(a){this.attrs===undefined&&(this.attrs={});if(a)for(var b in a)this.attrs[b]===undefined&&(this.attrs[b]=a[b])},setAttrs:function(a){var b=Kinetic.Type,c=this;if(a!==undefined){function d(a,e,f){for(var g in e){var h=e[g],i=a[g];f===0&&c._fireBeforeChangeEvent(g,i,h),a[g]===undefined&&h!==undefined&&(a[g]={});if(b._isObject(h)&&!b._isArray(h)&&!b._isElement(h)&&!b._hasMethods(h))Kinetic.Type._isObject(a[g])||(a[g]={}),d(a[g],h,f+1);else switch(g){case"rotationDeg":c._setAttr(a,"rotation",e[g]*Math.PI/180),g="rotation";break;case"offset":var j=b._getXY(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y);break;case"scale":var j=b._getXY(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y);break;case"points":c._setAttr(a,g,b._getPoints(h));break;case"crop":var j=b._getXY(h),k=b._getSize(h);c._setAttr(a[g],"x",j.x),c._setAttr(a[g],"y",j.y),c._setAttr(a[g],"width",k.width),c._setAttr(a[g],"height",k.height);break;default:c._setAttr(a,g,h)}f===0&&c._fireChangeEvent(g,i,h)}}d(this.attrs,a,0)}},isVisible:function(){return this.attrs.visible&&this.getParent()&&!this.getParent().isVisible()?!1:this.attrs.visible},show:function(){this.setAttrs({visible:!0})},hide:function(){this.setAttrs({visible:!1})},getZIndex:function(){return this.index},getAbsoluteZIndex:function(){function e(b){var f=[];for(var g=0;g<b.length;g++){var h=b[g];d++,h.nodeType!=="Shape"&&(f=f.concat(h.getChildren())),h._id===c._id&&(g=b.length)}f.length>0&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setPosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments));this.setAttrs(a)},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){var a=this.getAbsoluteTransform(),b=this.getOffset();return a.translate(b.x,b.y),a.getTranslation()},setAbsolutePosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.offset.x,y:this.attrs.offset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1},this.attrs.offset={x:0,y:0};var e=this.getOffset(),f=this.getAbsoluteTransform();f.invert(),f.translate(a.x,a.y),a={x:this.attrs.x+f.getTranslation().x,y:this.attrs.y+f.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y},this.attrs.offset={x:d.x,y:d.y}},move:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.getX(),c=this.getY();a.x!==undefined&&(b+=a.x),a.y!==undefined&&(c+=a.y),this.setAttrs({x:b,y:c})},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.setAttrs({rotation:this.getRotation()+a})},rotateDeg:function(a){this.setAttrs({rotation:this.getRotation()+a*Math.PI/180})},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},isDragging:function(){var a=Kinetic.Global;return a.drag.node!==undefined&&a.drag.node._id===this._id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType!=="Stage"&&this.getParent()?this.getParent().getStage():this.nodeType==="Stage"?this:undefined},simulate:function(a){this._handleEvent(a,{})},transitionTo:function(a){var b=Kinetic.Animation;this.transAnim&&(b._removeAnimation(this.transAnim),this.transAnim=null);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e._onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=null,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d<b.length;d++){var e=b[d],f=e.getTransform();a.multiply(f)}return a},getTransform:function(){var a=new Kinetic.Transform;return(this.attrs.x!==0||this.attrs.y!==0)&&a.translate(this.attrs.x,this.attrs.y),this.attrs.rotation!==0&&a.rotate(this.attrs.rotation),(this.attrs.scale.x!==1||this.attrs.scale.y!==1)&&a.scale(this.attrs.scale.x,this.attrs.scale.y),(this.attrs.offset.x!==0||this.attrs.offset.y!==0)&&a.translate(-1*this.attrs.offset.x,-1*this.attrs.offset.y),a},clone:function(a){var b=this.shapeType||this.nodeType,c=new Kinetic[b](this.attrs);for(var d in this.eventListeners){var e=this.eventListeners[d];for(var f=0;f<e.length;f++){var g=e[f];g.name.indexOf("kinetic")<0&&(c.eventListeners[d]||(c.eventListeners[d]=[]),c.eventListeners[d].push(g))}}return c.setAttrs(a),c},saveImageData:function(){try{var a=this.getStage(),b=a.bufferCanvas,c=b.getContext(),d=a.getWidth(),e=a.getHeight();b.clear(),this._draw(b);var f=c.getImageData(0,0,d,e);this.imageData=f}catch(g){Kinetic.Global.warn("Image data could not saved because canvas is dirty.")}},clearImageData:function(){delete this.imageData},getImageData:function(){return this.imageData},toDataURL:function(a,b){var c=this.getStage().bufferCanvas,d=c.getContext();c.clear(),this._draw(c);try{return c.element.toDataURL(a,b)}catch(e){return c.element.toDataURL()}},toImage:function(a){Kinetic.Type._getImage(this.toDataURL(),function(b){a(b)})},_setImageData:function(a){a&&a.data&&(this.imageData=a)},_fireBeforeChangeEvent:function(a,b,c){this._handleEvent("before"+a.toUpperCase()+"Change",{oldVal:b,newVal:c})},_fireChangeEvent:function(a,b,c){this._handleEvent(a+"Change",{oldVal:b,newVal:c})},_setAttr:function(a,b,c){c!==undefined&&(a===undefined&&(a={}),a[b]=c)},_listenDrag:function(){this._dragCleanup();var a=Kinetic.Global,b=this;this.on("mousedown.kinetic touchstart.kinetic",function(a){b._initDrag()})},_initDrag:function(){var a=Kinetic.Global,b=this.getStage(),c=b.getUserPosition();if(c){var d=this.getTransform().getTranslation(),e=this.getAbsoluteTransform().getTranslation(),f=this.getAbsolutePosition();a.drag.node=this,a.drag.offset.x=c.x-f.x,a.drag.offset.y=c.y-f.y}},_onDraggableChange:function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.Global;a&&b.drag.node&&b.drag.node._id===this._id&&a._endDrag()}},_dragCleanup:function(){this.off("mousedown.kinetic"),this.off("touchstart.kinetic")},_handleEvent:function(a,b){this.nodeType==="Shape"&&(b.shape=this);var c=this.getStage(),d=c?c.mouseoverShape:null,e=c?c.mouseoutShape:null,f=this.eventListeners,g=!0;a==="mouseover"&&e&&e._id===this._id?g=!1:a==="mouseout"&&d&&d._id===this._id&&(g=!1);if(g){if(f[a]){var h=f[a];for(var i=0;i<h.length;i++)h[i].handler.apply(this,[b])}c&&d&&e&&(c.mouseoverShape=d.parent,c.mouseoutShape=e.parent),Kinetic.Global.BUBBLE_WHITELIST.indexOf(a)>=0&&!b.cancelBubble&&this.parent&&this._handleEvent.call(this.parent,a,b)}}}),Kinetic.Node.addSetters=function(constructor,a){for(var b=0;b<a.length;b++){var c=a[b];this._addSetter(constructor,c)}},Kinetic.Node.addGetters=function(constructor,a){for(var b=0;b<a.length;b++){var c=a[b];this._addGetter(constructor,c)}},Kinetic.Node.addGettersSetters=function(constructor,a){this.addSetters(constructor,a),this.addGetters(constructor,a)},Kinetic.Node._addSetter=function(constructor,a){var b=this,c="set"+a.charAt(0).toUpperCase()+a.slice(1);constructor.prototype[c]=function(){arguments.length==1?arg=arguments[0]:arg=Array.prototype.slice.call(arguments);var b={};b[a]=arg,this.setAttrs(b)}},Kinetic.Node._addGetter=function(constructor,a){var b=this,c="get"+a.charAt(0).toUpperCase()+a.slice(1);constructor.prototype[c]=function(b){return this.attrs[a]}},Kinetic.Node.addGettersSetters(Kinetic.Node,["x","y","scale","detectionType","rotation","alpha","name","id","offset","draggable","dragConstraint","dragBounds","listening"]),Kinetic.Node.addSetters(Kinetic.Node,["rotationDeg"]),Kinetic.Container=Kinetic.Node.extend({init:function(a){this.children=[],this._super(a)},getChildren:function(){return this.children},removeChildren:function(){while(this.children.length>0)this.remove(this.children[0])},add:function(a){a._id=Kinetic.Global.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a);var b=a.getStage();if(b===undefined){var c=Kinetic.Global;c.tempNodes.push(a)}else{b._addId(a),b._addName(a);var c=Kinetic.Global;c._pullNodes(b)}return this._add!==undefined&&this._add(a),this},remove:function(a){if(a&&a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a.getId()),b._removeName(a.getName(),a._id));var c=Kinetic.Global;for(var d=0;d<c.tempNodes.length;d++){var e=c.tempNodes[d];if(e._id===a._id){c.tempNodes.splice(d,1);break}}this.children.splice(a.index,1),this._setChildrenIndices();while(a.children&&a.children.length>0)a.remove(a.children[0]);this._remove!==undefined&&this._remove(a)}return this},get:function(a){var b=this.getStage(),c,d=a.slice(1);if(a.charAt(0)==="#")c=b.ids[d]!==undefined?[b.ids[d]]:[];else{if(a.charAt(0)!==".")return a==="Shape"||a==="Group"||a==="Layer"?this._getNodes(a):!1;c=b.names[d]!==undefined?b.names[d]:[]}var e=[];for(var f=0;f<c.length;f++){var g=c[f];this.isAncestorOf(g)&&e.push(g)}return e},isAncestorOf:function(a){if(this.nodeType==="Stage")return!0;var b=a.getParent();while(b){if(b._id===this._id)return!0;b=b.getParent()}return!1},getIntersections:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=[],c=this.get("Shape");for(var d=0;d<c.length;d++){var e=c[d];e.isVisible()&&e.intersects(a)&&b.push(e)}return b},_getNodes:function(a){function c(d){var e=d.getChildren();for(var f=0;f<e.length;f++){var g=e[f];g.nodeType===a?b.push(g):g.nodeType!=="Shape"&&c(g)}}var b=[];return c(this),b},_drawChildren:function(a){var b=this.getStage(),c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.nodeType==="Shape"?e.isVisible()&&b.isVisible()&&e._draw(a):e.draw(a)}},_setChildrenIndices:function(){for(var a=0;a<this.children.length;a++)this.children[a].index=a}}),Kinetic.Stage=Kinetic.Container.extend({init:function(a){this.setDefaultAttrs({width:400,height:200,throttle:80}),typeof a.container=="string"&&(a.container=document.getElementById(a.container)),this._super(a),this._setStageDefaultProperties(),this._id=Kinetic.Global.idCounter++,this._buildDOM(),this._bindContentEvents(),this.on("widthChange.kinetic",function(){this._resizeDOM()}),this.on("heightChange.kinetic",function(){this._resizeDOM()});var b=Kinetic.Global;b.stages.push(this),this._addId(this),this._addName(this)},onFrame:function(a){this.anim={func:a}},start:function(){if(!this.animRunning){var a=Kinetic.Animation;a._addAnimation(this.anim),a._handleAnimation(),this.animRunning=!0}},stop:function(){Kinetic.Animation._removeAnimation(this.anim),this.animRunning=!1},draw:function(a){this._draw(a)},setSize:function(){var a=Kinetic.Type._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}},clear:function(){var a=this.children;for(var b=0;b<a.length;b++)a[b].clear()},toJSON:function(){function b(c){var d={};d.attrs={};for(var e in c.attrs){var f=c.attrs[e];!a._isFunction(f)&&!a._isElement(f)&&!a._hasMethods(f)&&(d.attrs[e]=f)}d.nodeType=c.nodeType,d.shapeType=c.shapeType;if(c.nodeType!=="Shape"){d.children=[];var g=c.getChildren();for(var h=0;h<g.length;h++){var i=g[h];d.children.push(b(i))}}return d}var a=Kinetic.Type;return JSON.stringify(b(this))},reset:function(){this.removeChildren(),this._setStageDefaultProperties(),this.setAttrs(this.defaultNodeAttrs)},load:function(a){function b(a,c){var d=c.children;if(d!==undefined)for(var e=0;e<d.length;e++){var f=d[e],g;f.nodeType==="Shape"?f.shapeType===undefined?g="Shape":g=f.shapeType:g=f.nodeType;var h=new Kinetic[g](f.attrs);a.add(h),b(h,f)}}this.reset();var c=JSON.parse(a);this.attrs=c.attrs,b(this,c),this.draw()},getMousePosition:function(a){return this.mousePos},getTouchPosition:function(a){return this.touchPos},getUserPosition:function(a){return this.getTouchPosition()||this.getMousePosition()},getContainer:function(){return this.attrs.container},getStage:function(){return this},getDOM:function(){return this.content},toDataURL:function(a,b,c){function g(h){var i=f[h],j;try{j=d.getElement().toDataURL(b,c)}catch(k){j=d.getElement().toDataURL()}var l=new Image;l.onload=function(){e.drawImage(l,0,0);if(h<f.length-1)g(h+1);else try{a(d.getElement().toDataURL(b,c))}catch(i){a(d.getElement().toDataURL())}},l.src=j}var d=new Kinetic.Canvas(this.attrs.width,this.attrs.height),e=d.getContext(),f=this.children;g(0)},toImage:function(a){this.toDataURL(function(b){Kinetic.Type._getImage(b,function(b){a(b)})})},_resizeDOM:function(){var a=this.attrs.width,b=this.attrs.height;this.content.style.width=a+"px",this.content.style.height=b+"px",this.bufferCanvas.setSize(a,b),this.pathCanvas.setSize(a,b);var c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.getCanvas().setSize(a,b),e.draw()}},_remove:function(a){try{this.content.removeChild(a.canvas)}catch(b){}},_add:function(a){a.canvas.setSize(this.attrs.width,this.attrs.height),a.draw(),this.content.appendChild(a.canvas.element),a.lastDrawTime=0},_detectEvent:function(a,b){var c=Kinetic.Global.drag.moving,d=Kinetic.Global,e=this.getUserPosition(),f=a.eventListeners,g=this;this.targetShape&&a._id===this.targetShape._id&&(this.targetFound=!0);if(a.isVisible()&&e!==undefined&&a.intersects(e)){if(!c&&this.mouseDown)return this.mouseDown=!1,this.clickStart=!0,a._handleEvent("mousedown",b),!0;if(this.mouseUp)return this.mouseUp=!1,a._handleEvent("mouseup",b),this.clickStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvent("click",b),this.inDoubleClickWindow&&a._handleEvent("dblclick",b),this.inDoubleClickWindow=!0,setTimeout(function(){g.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(!c&&this.touchStart&&!this.touchMove)return this.touchStart=!1,this.tapStart=!0,a._handleEvent("touchstart",b),!0;if(this.touchEnd)return this.touchEnd=!1,a._handleEvent("touchend",b),this.tapStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvent("tap",b),this.inDoubleClickWindow&&a._handleEvent("dbltap",b),this.inDoubleClickWindow=!0,setTimeout(function(){g.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(!c&&this.touchMove)return a._handleEvent("touchmove",b),!0;if(!c&&this._isNewTarget(a,b))return this.mouseoutShape&&(this.mouseoverShape=a,this.mouseoutShape._handleEvent("mouseout",b),this.mouseoverShape=undefined),a._handleEvent("mouseover",b),this._setTarget(a),!0;if(!c&&this.mouseMove)return a._handleEvent("mousemove",b),!0}else if(!c&&this.targetShape&&this.targetShape._id===a._id)return this._setTarget(undefined),this.mouseoutShape=a,!0;return!1},_setTarget:function(a){this.targetShape=a,this.targetFound=!0},_isNewTarget:function(a,b){if(!this.targetShape||!this.targetFound&&a._id!==this.targetShape._id){if(this.targetShape){var c=this.targetShape.eventListeners;c&&(this.mouseoutShape=this.targetShape)}return!0}return!1},_traverseChildren:function(a,b){var c=a.children;for(var d=c.length-1;d>=0;d--){var e=c[d];if(e.getListening())if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=new Date,c=b.getTime();this.lastEventTime=c;var d=Kinetic.Global;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathCanvas.clear(),this.targetFound=!1;var e=!1;for(var f=this.children.length-1;f>=0;f--){var g=this.children[f];if(g.isVisible()&&f>=0&&g.getListening()&&this._traverseChildren(g,a)){e=!0;break}}!e&&this.mouseoutShape&&(this.mouseoutShape._handleEvent("mouseout",a),this.mouseoutShape=undefined)},_bindContentEvents:function(){var a=Kinetic.Global,b=this,c=["mousedown","mousemove","mouseup","mouseover","mouseout","touchstart","touchmove","touchend"];for(var d=0;d<c.length;d++){var e=c[d];(function(){var a=e;b.content.addEventListener(a,function(c){b["_"+a](c)},!1)})()}},_mouseover:function(a){this._handleStageEvent(a)},_mouseout:function(a){var b=this.targetShape;b&&(b._handleEvent("mouseout",a),this.targetShape=undefined),this.mousePos=undefined,this._endDrag(a)},_mousemove:function(a){var b=this.attrs.throttle,c=new Date,d=c.getTime(),e=d-this.lastEventTime,f=1e3/b;if(e>=f||b>200)this.mouseDown=!1,this.mouseUp=!1,this.mouseMove=!0,this._handleStageEvent(a);this._startDrag(a)},_mousedown:function(a){this.mouseDown=!0,this.mouseUp=!1,this.mouseMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_mouseup:function(a){this.mouseDown=!1,this.mouseUp=!0,this.mouseMove=!1,this._handleStageEvent(a),this.clickStart=!1,this._endDrag(a)},_touchstart:function(a){a.preventDefault(),this.touchStart=!0,this.touchEnd=!1,this.touchMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_touchend:function(a){this.touchStart=!1,this.touchEnd=!0,this.touchMove=!1,this._handleStageEvent(a),this.tapStart=!1,this._endDrag(a)},_touchmove:function(a){var b=this,c=this.attrs.throttle,d=new Date,e=d.getTime(),f=e-this.lastEventTime,g=1e3/c;if(f>=g||c>200)a.preventDefault(),b.touchEnd=!1,b.touchMove=!0,b._handleStageEvent(a);this._startDrag(a)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_endDrag:function(a){var b=Kinetic.Global;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvent("dragend",a)),b.drag.node=undefined},_startDrag:function(a){var b=this,c=Kinetic.Global,d=c.drag.node;if(d){var e=b.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:d.attrs.x,y:d.attrs.y},i={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&i.x<g.left&&(i.x=g.left),g.right!==undefined&&i.x>g.right&&(i.x=g.right),g.top!==undefined&&i.y<g.top&&(i.y=g.top),g.bottom!==undefined&&i.y>g.bottom&&(i.y=g.bottom),d.setAbsolutePosition(i),f==="horizontal"?d.attrs.y=h.y:f==="vertical"&&(d.attrs.x=h.x),c.drag.node.nodeType==="Stage"?c.drag.node.draw():c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvent("dragstart",a)),c.drag.node._handleEvent("dragmove",a)}},_buildDOM:function(){this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferCanvas=new Kinetic.Canvas({width:this.attrs.width,height:this.attrs.height}),this.pathCanvas=new Kinetic.Canvas({width:this.attrs.width,height:this.attrs.height}),this.pathCanvas.strip(),this._resizeDOM()},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a!==undefined&&delete this.ids[a]},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a,b){if(a!==undefined){var c=this.names[a];if(c!==undefined){for(var d=0;d<c.length;d++){var e=c[d];e._id===b&&c.splice(d,1)}c.length===0&&delete this.names[a]}}},_onContent:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d];this.content.addEventListener(e,b,!1)}},_setStageDefaultProperties:function(){this.nodeType="Stage",this.lastEventTime=0,this.dblClickWindow=400,this.targetShape=undefined,this.targetFound=!1,this.mouseoverShape=undefined,this.mouseoutShape=undefined,this.mousePos=undefined,this.mouseDown=!1,this.mouseUp=!1,this.mouseMove=!1,this.clickStart=!1,this.touchPos=undefined,this.touchStart=!1,this.touchEnd=!1,this.touchMove=!1,this.tapStart=!1,this.ids={},this.names={},this.anim=undefined,this.animRunning=!1},_draw:function(a){this._drawChildren(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Stage,["width","height","throttle"]),Kinetic.Layer=Kinetic.Container.extend({init:function(a){this.setDefaultAttrs({throttle:80,clearBeforeDraw:!0}),this.nodeType="Layer",this.lastDrawTime=0,this.beforeDrawFunc=undefined,this.afterDrawFunc=undefined,this.canvas=new Kinetic.Canvas,this.canvas.getElement().style.position="absolute",this._super(a)},draw:function(a){var b=this.attrs.throttle,c=new Date,d=c.getTime(),e=d-this.lastDrawTime,f=1e3/b;if(e>=f||b>200)this._draw(a),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var g=this;this.drawTimeout=setTimeout(function(){g.draw(a)},17)}},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},getCanvas:function(){return this.canvas},getContext:function(){return this.canvas.context},toDataURL:function(a,b){try{return this.getCanvas().element.toDataURL(a,b)}catch(c){return this.getCanvas().element.toDataURL()}},_draw:function(a){a||(a=this.getCanvas());var b=new Date,c=b.getTime();this.lastDrawTime=c,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this),this.attrs.clearBeforeDraw&&a.clear(),this.isVisible()&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren(a)),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}}),Kinetic.Node.addGettersSetters(Kinetic.Layer,["clearBeforeDraw","throttle"]),Kinetic.Group=Kinetic.Container.extend({init:function(a){this.nodeType="Group",this._super(a)},draw:function(a){this._draw(a)},_draw:function(a){this.attrs.visible&&this._drawChildren(a)}}),Kinetic.Shape=Kinetic.Node.extend({init:function(a){this.setDefaultAttrs({detectionType:"path"}),this.nodeType="Shape",this.appliedShadow=!1,this._super(a)},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},stroke:function(a){var b=Kinetic.Global,c=!1;if(this.attrs.stroke||this.attrs.strokeWidth){a.save(),this.attrs.shadow&&!this.appliedShadow&&(c=this._applyShadow(a));var d=this.attrs.stroke?this.attrs.stroke:"black",e=this.attrs.strokeWidth?this.attrs.strokeWidth:2;a.lineWidth=e,a.strokeStyle=d,a.stroke(a),a.restore()}c&&this.stroke(a)},fill:function(a){var b=!1;a.save();var c=this.attrs.fill;if(c){this.attrs.shadow&&!this.appliedShadow&&(b=this._applyShadow(a));var d=c.start,e=c.end,f=null;if(typeof c=="string")f=this.attrs.fill,a.fillStyle=f,a.fill(a);else if(c.image){var g=c.repeat?c.repeat:"repeat";f=a.createPattern(c.image,g),a.save(),c.scale&&a.scale(c.scale.x,c.scale.y),c.offset&&a.translate(c.offset.x,c.offset.y),a.fillStyle=f,a.fill(a),a.restore()}else if(!d.radius&&!e.radius){var h=a.createLinearGradient(d.x,d.y,e.x,e.y),i=c.colorStops;for(var j=0;j<i.length;j+=2)h.addColorStop(i[j],i[j+1]);f=h,a.fillStyle=f,a.fill(a)}else if(!d.radius&&d.radius!==0||!e.radius&&e.radius!==0)f="black",a.fillStyle=f,a.fill(a);else{var h=a.createRadialGradient(d.x,d.y,d.radius,e.x,e.y,e.radius),i=c.colorStops;for(var j=0;j<i.length;j+=2)h.addColorStop(i[j],i[j+1]);f=h,a.fillStyle=f,a.fill(a)}}a.restore(),b&&this.fill(a)},fillText:function(a,b){var c=!1;a.save(),this.attrs.textFill&&(this.attrs.shadow&&!this.appliedShadow&&(c=this._applyShadow(a)),a.fillStyle=this.attrs.textFill,a.fillText(b,0,0)),a.restore(),c&&this.fillText(a,b,0,0)},strokeText:function(a,b){var c=!1;a.save();if(this.attrs.textStroke||this.attrs.textStrokeWidth)this.attrs.shadow&&!this.appliedShadow&&(c=this._applyShadow(a)),this.attrs.textStroke?!this.attrs.textStrokeWidth&&this.attrs.textStrokeWidth!==0&&(this.attrs.textStrokeWidth=2):this.attrs.textStroke="black",a.lineWidth=this.attrs.textStrokeWidth,a.strokeStyle=this.attrs.textStroke
+,a.strokeText(a,b,0,0);a.restore(),c&&this.strokeText(a,b,0,0)},drawImage:function(){var a=!1,b=arguments[0];b.save();var c=Array.prototype.slice.call(arguments);if(c.length===6||c.length===10)this.attrs.shadow&&!this.appliedShadow&&(a=this._applyShadow(b)),c.length===6?b.drawImage(c[1],c[2],c[3],c[4],c[5]):b.drawImage(c[1],c[2],c[3],c[4],c[5],c[6],c[7],c[8],c[9]);b.restore(),a&&this.drawImage.apply(this,c)},applyLineJoin:function(a){this.attrs.lineJoin&&(a.lineJoin=this.attrs.lineJoin)},_applyShadow:function(a){var b=this.attrs.shadow;if(b){var c=this.getAbsoluteAlpha(),d=b.color?b.color:"black",e=b.blur?b.blur:5,f=b.offset?b.offset:{x:0,y:0};return b.alpha&&(a.globalAlpha=b.alpha*c),a.shadowColor=d,a.shadowBlur=e,a.shadowOffsetX=f.x,a.shadowOffsetY=f.y,this.appliedShadow=!0,!0}return!1},intersects:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.getStage();if(this.attrs.detectionType==="path"){var c=b.pathCanvas,d=c.getContext();return this._draw(c),d.isPointInPath(a.x,a.y)}if(this.imageData){var e=b.attrs.width,f=this.imageData.data[(e*a.y+a.x)*4+3];return f}return!1},_draw:function(a){if(this.attrs.drawFunc){var b=this.getStage(),c=a.getContext(),d=[],e=this.parent;d.unshift(this);while(e)d.unshift(e),e=e.parent;c.save();for(var f=0;f<d.length;f++){var g=d[f],h=g.getTransform(),i=h.getMatrix();c.transform(i[0],i[1],i[2],i[3],i[4],i[5])}var j=this.getAbsoluteAlpha();j!==1&&(c.globalAlpha=j),this.applyLineJoin(c),this.appliedShadow=!1,this.attrs.drawFunc.call(this,a.getContext()),c.restore()}}}),Kinetic.Node.addGettersSetters(Kinetic.Shape,["fill","stroke","lineJoin","strokeWidth","shadow","drawFunc","filter"]),Kinetic.Rect=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({width:0,height:0,cornerRadius:0}),this.shapeType="Rect",a.drawFunc=function(a){a.beginPath(),this.attrs.cornerRadius===0?a.rect(0,0,this.attrs.width,this.attrs.height):(a.moveTo(this.attrs.cornerRadius,0),a.lineTo(this.attrs.width-this.attrs.cornerRadius,0),a.arc(this.attrs.width-this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI*3/2,0,!1),a.lineTo(this.attrs.width,this.attrs.height-this.attrs.cornerRadius),a.arc(this.attrs.width-this.attrs.cornerRadius,this.attrs.height-this.attrs.cornerRadius,this.attrs.cornerRadius,0,Math.PI/2,!1),a.lineTo(this.attrs.cornerRadius,this.attrs.height),a.arc(this.attrs.cornerRadius,this.attrs.height-this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI/2,Math.PI,!1),a.lineTo(0,this.attrs.cornerRadius),a.arc(this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI,Math.PI*3/2,!1)),a.closePath(),this.fill(a),this.stroke(a)},this._super(a)},setSize:function(){var a=Kinetic.Type._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}}}),Kinetic.Node.addGettersSetters(Kinetic.Rect,["width","height","cornerRadius"]),Kinetic.Ellipse=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({radius:{x:0,y:0}}),this.shapeType="Ellipse",a.drawFunc=function(a){var b=this.getRadius();a.beginPath(),a.save(),b.x!==b.y&&a.scale(1,b.y/b.x),a.arc(0,0,b.x,0,Math.PI*2,!0),a.restore(),a.closePath(),this.fill(a),this.stroke(a)},this._super(a),this._convertRadius();var b=this;this.on("radiusChange.kinetic",function(){b._convertRadius()})},_convertRadius:function(){var a=Kinetic.Type,b=this.getRadius();if(a._isObject(b))return!1;this.attrs.radius=a._getXY(b)}}),Kinetic.Circle=Kinetic.Ellipse,Kinetic.Node.addGettersSetters(Kinetic.Ellipse,["radius"]),Kinetic.Image=Kinetic.Shape.extend({init:function(a){this.shapeType="Image",a.drawFunc=function(a){if(!!this.attrs.image){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),this.fill(a),this.stroke(a);if(this.attrs.crop&&this.attrs.crop.width&&this.attrs.crop.height){var d=this.attrs.crop.x?this.attrs.crop.x:0,e=this.attrs.crop.y?this.attrs.crop.y:0,f=this.attrs.crop.width,g=this.attrs.crop.height;this.drawImage(a,this.attrs.image,d,e,f,g,0,0,b,c)}else this.drawImage(a,this.attrs.image,0,0,b,c)}},this._super(a);var b=this;this.on("filterChange",function(){b._applyFilter()})},setSize:function(){var a=Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments));this.setAttrs(a)},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}},getWidth:function(){return this.attrs.width?this.attrs.width:this.attrs.image?this.attrs.image.width:0},getHeight:function(){return this.attrs.height?this.attrs.height:this.attrs.image?this.attrs.image.height:0},applyFilter:function(a){try{var b=this.getX(),c=this.getY(),d=this.getRotation(),e=this.getScale().x,f=this.getScale().y,g=this.getOffset().x,h=this.getOffset().y;this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scale.x=1,this.attrs.scale.y=1,this.attrs.offset.x=0,this.attrs.offset.y=0,this.saveImageData(),this.attrs.x=b,this.attrs.y=c,this.attrs.rotation=d,this.attrs.scale.x=e,this.attrs.scale.y=f,this.attrs.offset.x=g,this.attrs.offset.y=h,a.filter.call(this,a);var i=this;Kinetic.Type._getImage(this.getImageData(),function(b){i.setImage(b),a.callback&&a.callback()})}catch(j){Kinetic.Global.warn("Unable to apply filter.")}}}),Kinetic.Node.addGettersSetters(Kinetic.Image,["image","crop","filter"]),Kinetic.Node.addSetters(Kinetic.Image,["width","height"]),Kinetic.Sprite=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({index:0,frameRate:17}),a.drawFunc=function(a){if(!!this.attrs.image){var b=this.attrs.animation,c=this.attrs.index,d=this.attrs.animations[b][c];a.beginPath(),a.rect(0,0,d.width,d.height),a.closePath(),this.drawImage(a,this.attrs.image,d.x,d.y,d.width,d.height,0,0,d.width,d.height)}},this._super(a);var b=this;this.on("animationChange.kinetic",function(){b.setIndex(0)})},start:function(){var a=this,b=this.getLayer(),c=Kinetic.Animation;this.anim&&(c._removeAnimation(this.anim),this.anim=null),this.anim={node:b},c._addAnimation(this.anim),this.interval=setInterval(function(){var b=a.attrs.index;a._updateIndex(),a.afterFrameFunc&&b===a.afterFrameIndex&&a.afterFrameFunc()},1e3/this.attrs.frameRate),c._handleAnimation()},stop:function(){var a=Kinetic.Animation;this.anim&&(a._removeAnimation(this.anim),this.anim=null),clearInterval(this.interval)},afterFrame:function(a,b){this.afterFrameIndex=a,this.afterFrameFunc=b},_updateIndex:function(){var a=this.attrs.index,b=this.attrs.animation;a<this.attrs.animations[b].length-1?this.attrs.index++:this.attrs.index=0}}),Kinetic.Node.addGettersSetters(Kinetic.Sprite,["animation","animations","index"]),Kinetic.Polygon=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({points:[]}),this.shapeType="Polygon",a.drawFunc=function(a){a.beginPath(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var b=1;b<this.attrs.points.length;b++)a.lineTo(this.attrs.points[b].x,this.attrs.points[b].y);a.closePath(),this.fill(a),this.stroke(a)},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Polygon,["points"]),Kinetic.RegularPolygon=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({radius:0,sides:0}),this.shapeType="RegularPolygon",a.drawFunc=function(a){a.beginPath(),a.moveTo(0,0-this.attrs.radius);for(var b=1;b<this.attrs.sides;b++){var c=this.attrs.radius*Math.sin(b*2*Math.PI/this.attrs.sides),d=-1*this.attrs.radius*Math.cos(b*2*Math.PI/this.attrs.sides);a.lineTo(c,d)}a.closePath(),this.fill(a),this.stroke(a)},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.RegularPolygon,["radius","sides"]),Kinetic.Star=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({numPoints:0,innerRadius:0,outerRadius:0}),this.shapeType="Star",a.drawFunc=function(a){a.beginPath(),a.moveTo(0,0-this.attrs.outerRadius);for(var b=1;b<this.attrs.numPoints*2;b++){var c=b%2===0?this.attrs.outerRadius:this.attrs.innerRadius,d=c*Math.sin(b*Math.PI/this.attrs.numPoints),e=-1*c*Math.cos(b*Math.PI/this.attrs.numPoints);a.lineTo(d,e)}a.closePath(),this.fill(a),this.stroke(a)},this._super(a)}}),Kinetic.Node.addGettersSetters(Kinetic.Star,["numPoints","innerRadius","outerRadius"]),Kinetic.Text=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({fontFamily:"Calibri",text:"",fontSize:12,align:"left",verticalAlign:"top",fontStyle:"normal",padding:0,width:"auto",height:"auto",detectionType:"path",cornerRadius:0,lineHeight:1.2}),this.dummyCanvas=document.createElement("canvas"),this.shapeType="Text",a.drawFunc=function(a){a.beginPath();var b=this.getBoxWidth(),c=this.getBoxHeight();this.attrs.cornerRadius===0?a.rect(0,0,b,c):(a.moveTo(this.attrs.cornerRadius,0),a.lineTo(b-this.attrs.cornerRadius,0),a.arc(b-this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI*3/2,0,!1),a.lineTo(b,c-this.attrs.cornerRadius),a.arc(b-this.attrs.cornerRadius,c-this.attrs.cornerRadius,this.attrs.cornerRadius,0,Math.PI/2,!1),a.lineTo(this.attrs.cornerRadius,c),a.arc(this.attrs.cornerRadius,c-this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI/2,Math.PI,!1),a.lineTo(0,this.attrs.cornerRadius),a.arc(this.attrs.cornerRadius,this.attrs.cornerRadius,this.attrs.cornerRadius,Math.PI,Math.PI*3/2,!1)),a.closePath(),this.fill(a),this.stroke(a);var d=this.attrs.padding,e=this.attrs.lineHeight*this.getTextHeight(),f=this.textArr;a.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily,a.textBaseline="middle",a.textAlign="left",a.save(),a.translate(d,0),a.translate(0,d+this.getTextHeight()/2);for(var g=0;g<f.length;g++){var h=f[g];a.save(),this.attrs.align==="right"?a.translate(this.getBoxWidth()-this._getTextSize(h).width-d*2,0):this.attrs.align==="center"&&a.translate((this.getBoxWidth()-this._getTextSize(h).width-d*2)/2,0),this.fillText(a,h),this.strokeText(a,h),a.restore(),a.translate(0,e)}a.restore()},this._super(a);var b=["width","height","padding","text","textStroke","textStrokeWidth"],c=this;for(var d=0;d<b.length;d++){var e=b[d];this.on(e+"Change.kinetic",c._setTextData)}c._setTextData()},getBoxWidth:function(){return this.attrs.width==="auto"?this.getTextWidth()+this.attrs.padding*2:this.attrs.width},getBoxHeight:function(){return this.attrs.height==="auto"?this.getTextHeight()*this.textArr.length*this.attrs.lineHeight+this.attrs.padding*2:this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b=this.dummyCanvas,c=b.getContext("2d");c.save(),c.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily;var d=c.measureText(a);return c.restore(),{width:d.width,height:parseInt(this.attrs.fontSize,10)}},_setTextData:function(){var a=this.attrs.text.split(""),b=[],c=0,d=!0;this.textWidth=0,this.textHeight=this._getTextSize(this.attrs.text).height;var e=this.attrs.lineHeight*this.textHeight;while(a.length>0&&d&&(this.attrs.height==="auto"||e*(c+1)<this.attrs.height-this.attrs.padding*2)){var f=0,g=undefined;d=!1;while(f<a.length){if(a.indexOf("\n")===f){a.splice(f,1),g=a.splice(0,f).join("");break}var h=a.slice(0,f);if(this.attrs.width!=="auto"&&this._getTextSize(h.join("")).width>this.attrs.width-this.attrs.padding*2){if(f==0)break;var i=h.lastIndexOf(" "),j=h.lastIndexOf("-"),k=Math.max(i,j);if(k>=0){g=a.splice(0,1+k).join("");break}g=a.splice(0,f).join("");break}f++,f===a.length&&(g=a.splice(0,f).join(""))}this.textWidth=Math.max(this.textWidth,this._getTextSize(g).width),g!==undefined&&(b.push(g),d=!0),c++}this.textArr=b}}),Kinetic.Node.addGettersSetters(Kinetic.Text,["fontFamily","fontSize","fontStyle","textFill","textStroke","textStrokeWidth","padding","align","lineHeight","text","width","height","cornerRadius","fill","stroke","strokeWidth","shadow"]),Kinetic.Line=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({points:[],lineCap:"butt",dashArray:[],detectionType:"pixel"}),this.shapeType="Line",a.drawFunc=function(a){var b={};a.beginPath(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var c=1;c<this.attrs.points.length;c++){var d=this.attrs.points[c].x,e=this.attrs.points[c].y;if(this.attrs.dashArray.length>0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(a,f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.stroke(a)},this._super(a)},_dashedLine:function(a,b,c,d,e,f){var g=f.length,h=d-b,i=e-c,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=f[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(b+=h<0&&i<0?p*-1:p,c+=h<0&&i<0?k*p*-1:k*p):(b+=h<0&&i<0?k*p*-1:k*p,c+=h<0&&i<0?p*-1:p),a[n?"lineTo":"moveTo"](b,c),l-=o,n=!n}a.moveTo(d,e)}}),Kinetic.Node.addGettersSetters(Kinetic.Line,["dashArray","lineCap","points"]),Kinetic.Path=Kinetic.Shape.extend({init:function(a){this.shapeType="Path",this.dataArray=[];var b=this;a.drawFunc=function(a){var b=this.dataArray;a.beginPath();for(var c=0;c<b.length;c++){var d=b[c].command,e=b[c].points;switch(d){case"L":a.lineTo(e[0],e[1]);break;case"M":a.moveTo(e[0],e[1]);break;case"C":a.bezierCurveTo(e[0],e[1],e[2],e[3],e[4],e[5]);break;case"Q":a.quadraticCurveTo(e[0],e[1],e[2],e[3]);break;case"A":var f=e[0],g=e[1],h=e[2],i=e[3],j=e[4],k=e[5],l=e[6],m=e[7],n=h>i?h:i,o=h>i?1:h/i,p=h>i?i/h:1;a.translate(f,g),a.rotate(l),a.scale(o,p),a.arc(0,0,n,j,j+k,1-m),a.scale(1/o,1/p),a.rotate(-l),a.translate(-f,-g);break;case"z":a.closePath()}}this.fill(a),this.stroke(a)},this._super(a),this.dataArray=this._getDataArray(),this.on("dataChange",function(){b.dataArray=b._getDataArray()})},_getDataArray:function(){var a=this.attrs.data;if(!this.attrs.data)return[];var b=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];a=a.replace(new RegExp(" ","g"),",");for(var c=0;c<b.length;c++)a=a.replace(new RegExp(b[c],"g"),"|"+b[c]);var d=a.split("|"),e=[],f=0,g=0;for(var c=1;c<d.length;c++){var h=d[c],i=h.charAt(0);h=h.slice(1),h=h.replace(new RegExp(",-","g"),"-"),h=h.replace(new RegExp("-","g"),",-");var j=h.split(",");j.length>0&&j[0]===""&&j.shift();for(var k=0;k<j.length;k++)j[k]=parseFloat(j[k]);while(j.length>0){if(isNaN(j[0]))break;var l=undefined,m=[];switch(i){case"l":f+=j.shift(),g+=j.shift(),l="L",m.push(f,g);break;case"L":f=j.shift(),g=j.shift(),m.push(f,g);break;case"m":f+=j.shift(),g+=j.shift(),l="M",m.push(f,g),i="l";break;case"M":f=j.shift(),g=j.shift(),l="M",m.push(f,g),i="L";break;case"h":f+=j.shift(),l="L",m.push(f,g);break;case"H":f=j.shift(),l="L",m.push(f,g);break;case"v":g+=j.shift(),l="L",m.push(f,g);break;case"V":g=j.shift(),l="L",m.push(f,g);break;case"C":m.push(j.shift(),j.shift(),j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"c":m.push(f+j.shift(),g+j.shift(),f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"S":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,j.shift(),j.shift()),f=j.shift(),g=j.shift(),l="C",m.push(f,g);break;case"s":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"Q":m.push(j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"q":m.push(f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="Q",m.push(f,g);break;case"T":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f=j.shift(),g=j.shift(),l="Q",m.push(n,o,f,g);break;case"t":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f+=j.shift(),g+=j.shift(),l="Q",m.push(n,o,f,g);break;case"A":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f=j.shift(),g=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s);break;case"a":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f+=j.shift(),g+=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s)}e.push({command:l||i,points:m})}(i==="z"||i==="Z")&&e.push({command:"z",points:[]})}return e},_convertEndpointToCenterParameterization:function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e==f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]<a[1]*b[0]?-1:1)*Math.acos(t(a,b))},v=u([1,0],[(k-o)/g,(l-p)/h]),w=[(k-o)/g,(l-p)/h],x=[(-1*k-o)/g,(-1*l-p)/h],y=u(w,x);return t(w,x)<=-1&&(y=Math.PI),t(w,x)>=1&&(y=0),f==0&&y>0&&(y-=2*Math.PI),f==1&&y<0&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]}}),Kinetic.Node.addGettersSetters(Kinetic.Path,["data"]),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b,e,f){for(var g in a)g!=="duration"&&g!=="easing"&&g!=="callback"&&(Kinetic.Type._isObject(a[g])?(e[g]={},d(a[g],b[g],e[g],f)):c._add(c._getTween(b,g,a[g],e,f)))}this.node=a,this.config=b,this.tweens=[];var c=this,e={};d(b,a.attrs,e,e);var f=0;for(var g=0;g<this.tweens.length;g++){var h=this.tweens[g];h.onFinished=function(){f++,f>=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},_add:function(a){this.tweens.push(a)},_getTween:function(a,b,c,d,e){var f=this.config,g=this.node,h=f.easing;h===undefined&&(h="linear");var i=new Kinetic.Tween(g,function(a){d[b]=a,g.setAttrs(e)},Kinetic.Tweens[h],a[b],c,f.duration);return i}},Kinetic.Tween=function(a,b,c,d,e,f){this._listeners=[],this.addListener(this),this.obj=a,this.propFunc=b,this.begin=d,this._pos=d,this.setDuration(f),this.isPlaying=!1,this._change=0,this.prevTime=0,this.prevPos=0,this.looping=!1,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.name="",this.func=c,this.setFinish(e)},Kinetic.Tween.prototype={setTime:function(a){this.prevTime=this._time,a>this.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!==undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b<arguments.length;b++)a.push(arguments[b]);var c=a.shift(),d=this._listeners,e=d.length;for(var b=0;b<e;b++)d[b][c]&&d[b][c].apply(d[b],a)},fixTime:function(){this._startTime=this.getTimer()-this._time*1e3},getTimer:function(){return(new Date).getTime()-this._time}},Kinetic.Tweens={"back-ease-in":function(a,b,c,d,e,f){var g=1.70158;return c*(a/=d)*a*((g+1)*a-g)+b},"back-ease-out":function(a,b,c,d,e,f){var g=1.70158;return c*((a=a/d-1)*a*((g+1)*a+g)+1)+b},"back-ease-in-out":function(a,b,c,d,e,f){var g=1.70158;return(a/=d/2)<1?c/2*a*a*(((g*=1.525)+1)*a-g)+b:c/2*((a-=2)*a*(((g*=1.525)+1)*a+g)+2)+b},"elastic-ease-in":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),-(e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f))+b)},"elastic-ease-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),e*Math.pow(2,-10*a)*Math.sin((a*d-g)*2*Math.PI/f)+c+b)},"elastic-ease-in-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d/2)==2?b+c:(f||(f=d*.3*1.5),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),a<1?-0.5*e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)*.5+c+b)},"bounce-ease-out":function(a,b,c,d){return(a/=d)<1/2.75?c*7.5625*a*a+b:a<2/2.75?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:a<2.5/2.75?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},"bounce-ease-in":function(a,b,c,d){return c-Kinetic.Tweens["bounce-ease-out"](d-a,0,c,d)+b},"bounce-ease-in-out":function(a,b,c,d){return a<d/2?Kinetic.Tweens["bounce-ease-in"](a*2,0,c,d)*.5+b:Kinetic.Tweens["bounce-ease-out"](a*2-d,0,c,d)*.5+c*.5+b},"ease-in":function(a,b,c,d){return c*(a/=d)*a+b},"ease-out":function(a,b,c,d){return-c*(a/=d)*(a-2)+b},"ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},"strong-ease-in":function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},"strong-ease-out":function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},"strong-ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},linear:function(a,b,c,d){return c*a/d+b}},Kinetic.Filters.Grayscale=function(){var a=this.imageData.data;for(var b=0;b<a.length;b+=4){var c=.34*a[b]+.5*a[b+1]+.16*a[b+2];a[b]=c,a[b+1]=c,a[b+2]=c}};
diff --git a/src/Container.js b/src/Container.js
index 37ce49ea..2f782634 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -211,18 +211,18 @@ Kinetic.Container = Kinetic.Node.extend({
     /**
      * draw children
      */
-    _drawChildren: function(layer) {
+    _drawChildren: function(canvas) {
         var stage = this.getStage();
         var children = this.children;
         for(var n = 0; n < children.length; n++) {
             var child = children[n];
             if(child.nodeType === 'Shape') {
                 if(child.isVisible() && stage.isVisible()) {
-                    child._draw( layer ? layer : child.getLayer());
+                    child._draw(canvas);
                 }
             }
             else {
-                child.draw(layer);
+                child.draw(canvas);
             }
         }
     },
@@ -230,27 +230,8 @@ Kinetic.Container = Kinetic.Node.extend({
      * set children indices
      */
     _setChildrenIndices: function() {
-        /*
-         * if reordering Layers, remove all canvas elements
-         * from the container except the buffer and backstage canvases
-         * and then readd all the layers
-         */
-        if(this.nodeType === 'Stage') {
-            var canvases = this.content.children;
-            var bufferCanvas = canvases[0];
-            var backstageCanvas = canvases[1];
-
-            this.content.innerHTML = '';
-            this.content.appendChild(bufferCanvas);
-            this.content.appendChild(backstageCanvas);
-        }
-
         for(var n = 0; n < this.children.length; n++) {
             this.children[n].index = n;
-
-            if(this.nodeType === 'Stage') {
-                this.content.appendChild(this.children[n].canvas);
-            }
         }
     }
 });
diff --git a/src/Group.js b/src/Group.js
index 8f7eb044..0cccabf7 100644
--- a/src/Group.js
+++ b/src/Group.js
@@ -14,12 +14,12 @@ Kinetic.Group = Kinetic.Container.extend({
         // call super constructor
         this._super(config);
     },
-    draw: function(layer) {
-        this._draw(layer);
+    draw: function(canvas) {
+        this._draw(canvas);
     },
-    _draw: function(layer) {
+    _draw: function(canvas) {
         if(this.attrs.visible) {
-            this._drawChildren(layer);
+            this._drawChildren(canvas);
         }
     }
 });
diff --git a/src/Layer.js b/src/Layer.js
index e1c9ff4d..c360ead9 100644
--- a/src/Layer.js
+++ b/src/Layer.js
@@ -20,9 +20,8 @@ Kinetic.Layer = Kinetic.Container.extend({
         this.beforeDrawFunc = undefined;
         this.afterDrawFunc = undefined;
 
-        this.canvas = document.createElement('canvas');
-        this.context = this.canvas.getContext('2d');
-        this.canvas.style.position = 'absolute';
+        this.canvas = new Kinetic.Canvas();
+        this.canvas.getElement().style.position = 'absolute';
 
         // call super constructor
         this._super(config);
@@ -33,7 +32,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Layer.prototype
      */
-    draw: function(layer) {
+    draw: function(canvas) {
         var throttle = this.attrs.throttle;
         var date = new Date();
         var time = date.getTime();
@@ -41,7 +40,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         var tt = 1000 / throttle;
 
         if(timeDiff >= tt || throttle > 200) {
-            this._draw(layer);
+            this._draw(canvas);
 
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
@@ -58,7 +57,7 @@ Kinetic.Layer = Kinetic.Container.extend({
              * wait 17ms before trying again (60fps)
              */
             this.drawTimeout = setTimeout(function() {
-                that.draw(layer);
+                that.draw(canvas);
             }, 17);
         }
     },
@@ -78,19 +77,6 @@ Kinetic.Layer = Kinetic.Container.extend({
     afterDraw: function(func) {
         this.afterDrawFunc = func;
     },
-    /**
-     * clears the canvas context tied to the layer.  Clearing
-     *  a layer does not remove its children.  The nodes within
-     *  the layer will be redrawn whenever the .draw() method
-     *  is used again.
-     * @name clear
-     * @methodOf Kinetic.Layer.prototype
-     */
-    clear: function() {
-        var context = this.getContext();
-        var canvas = this.getCanvas();
-        context.clearRect(0, 0, canvas.width, canvas.height);
-    },
     /**
      * get layer canvas
      * @name getCanvas
@@ -100,12 +86,12 @@ Kinetic.Layer = Kinetic.Container.extend({
         return this.canvas;
     },
     /**
-     * get layer context
+     * get layer canvas context
      * @name getContext
      * @methodOf Kinetic.Layer.prototype
      */
     getContext: function() {
-        return this.context;
+        return this.canvas.context;
     },
     /**
      * Creates a composite data URL. If MIME type is not
@@ -115,7 +101,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * based on what's draw on the layer, rather than drawing
      * the current state of each child node
      * @name toDataURL
-     * @methodOf Kinetic.Stage.prototype
+     * @methodOf Kinetic.Layer.prototype
      * @param {String} [mimeType]
      * @param {Number} [quality]
      */
@@ -123,16 +109,24 @@ Kinetic.Layer = Kinetic.Container.extend({
         try {
             // If this call fails (due to browser bug, like in Firefox 3.6),
             // then revert to previous no-parameter image/png behavior
-            return this.getCanvas().toDataURL(mimeType, quality);
+            return this.getCanvas().element.toDataURL(mimeType, quality);
         }
         catch(e) {
-            return this.getCanvas().toDataURL();
+            return this.getCanvas().element.toDataURL();
         }
     },
     /**
      * private draw children
      */
-    _draw: function(layer) {
+    _draw: function(canvas) {
+        /*
+         * if canvas is not defined, then use the canvas
+         * tied to the layer
+         */
+        if(!canvas) {
+            canvas = this.getCanvas();
+        }
+
         var date = new Date();
         var time = date.getTime();
         this.lastDrawTime = time;
@@ -143,8 +137,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         }
 
         if(this.attrs.clearBeforeDraw) {
-            var clearLayer = layer ? layer : this;
-            clearLayer.clear();
+            canvas.clear();
         }
 
         if(this.isVisible()) {
@@ -154,7 +147,7 @@ Kinetic.Layer = Kinetic.Container.extend({
             }
 
             // draw children
-            this._drawChildren(layer);
+            this._drawChildren(canvas);
         }
 
         // after draw  handler
diff --git a/src/Node.js b/src/Node.js
index 574a7b20..00354fd7 100644
--- a/src/Node.js
+++ b/src/Node.js
@@ -386,7 +386,10 @@ Kinetic.Node = Kinetic.Class.extend({
      * @methodOf Kinetic.Node.prototype
      */
     getAbsolutePosition: function() {
-        return this.getAbsoluteTransform().getTranslation();
+        var trans = this.getAbsoluteTransform();
+        var o = this.getOffset();
+        trans.translate(o.x, o.y);
+        return trans.getTranslation();
     },
     /**
      * set absolute position relative to stage
@@ -416,9 +419,16 @@ Kinetic.Node = Kinetic.Class.extend({
             x: 1,
             y: 1
         };
+        this.attrs.offset = {
+            x: 0,
+            y: 0
+        };
+
+        var o = this.getOffset();
 
         // unravel transform
         var it = this.getAbsoluteTransform();
+
         it.invert();
         it.translate(pos.x, pos.y);
         pos = {
@@ -434,6 +444,10 @@ Kinetic.Node = Kinetic.Class.extend({
             x: scale.x,
             y: scale.y
         };
+        this.attrs.offset = {
+            x: offset.x,
+            y: offset.y
+        };
     },
     /**
      * move node by an amount
@@ -727,7 +741,6 @@ Kinetic.Node = Kinetic.Class.extend({
         for(var n = 0; n < family.length; n++) {
             var node = family[n];
             var m = node.getTransform();
-
             am.multiply(m);
         }
 
@@ -803,14 +816,14 @@ Kinetic.Node = Kinetic.Class.extend({
     saveImageData: function() {
         try {
             var stage = this.getStage();
-            var bufferLayer = stage.bufferLayer;
-            var bufferLayerContext = bufferLayer.getContext();
+            var bufferCanvas = stage.bufferCanvas;
+            var bufferContext = bufferCanvas.getContext();
             var width = stage.getWidth();
             var height = stage.getHeight();
 
-            bufferLayer.clear();
-            this._draw(bufferLayer);
-            var imageData = bufferLayerContext.getImageData(0, 0, width, height);
+            bufferCanvas.clear();
+            this._draw(bufferCanvas);
+            var imageData = bufferContext.getImageData(0, 0, width, height);
             this.imageData = imageData;
         }
         catch(e) {
@@ -838,24 +851,23 @@ Kinetic.Node = Kinetic.Class.extend({
      * specified, then "image/png" will result. For "image/jpeg", specify a quality
      * level as quality (range 0.0 - 1.0)
      * @name toDataURL
-     * @methodOf Kinetic.Stage.prototype
+     * @methodOf Kinetic.Node.prototype
      * @param {String} [mimeType]
      * @param {Number} [quality]
      */
     toDataURL: function(mimeType, quality) {
-        var bufferLayer = this.getStage().bufferLayer;
-        var bufferCanvas = bufferLayer.getCanvas();
-        var bufferContext = bufferLayer.getContext();
-        bufferLayer.clear();
-        this._draw(bufferLayer);
+        var bufferCanvas = this.getStage().bufferCanvas;
+        var bufferContext = bufferCanvas.getContext();
+        bufferCanvas.clear();
+        this._draw(bufferCanvas);
 
         try {
             // If this call fails (due to browser bug, like in Firefox 3.6),
             // then revert to previous no-parameter image/png behavior
-            return bufferLayer.getCanvas().toDataURL(mimeType, quality);
+            return bufferCanvas.element.toDataURL(mimeType, quality);
         }
         catch(e) {
-            return bufferLayer.getCanvas().toDataURL();
+            return bufferCanvas.element.toDataURL();
         }
     },
     /**
@@ -910,9 +922,10 @@ Kinetic.Node = Kinetic.Class.extend({
         if(pos) {
             var m = this.getTransform().getTranslation();
             var am = this.getAbsoluteTransform().getTranslation();
+            var ap = this.getAbsolutePosition();
             go.drag.node = this;
-            go.drag.offset.x = pos.x - this.getAbsoluteTransform().getTranslation().x;
-            go.drag.offset.y = pos.y - this.getAbsoluteTransform().getTranslation().y;
+            go.drag.offset.x = pos.x - ap.x;
+            go.drag.offset.y = pos.y - ap.y;
         }
     },
     _onDraggableChange: function() {
diff --git a/src/Shape.js b/src/Shape.js
index 357d36f5..c8133ee7 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -30,24 +30,20 @@ Kinetic.Shape = Kinetic.Node.extend({
         this._super(config);
     },
     /**
-     * get layer context where the shape is being drawn.  When
-     * the shape is being rendered, .getContext() returns the context of the
-     * user created layer that contains the shape.  When the event detection
-     * engine is determining whether or not an event has occured on that shape,
-     * .getContext() returns the context of the invisible path layer.
+     * get canvas context tied to the layer
      * @name getContext
      * @methodOf Kinetic.Shape.prototype
      */
     getContext: function() {
-        return this.tempLayer.getContext();
+        return this.getLayer().getContext();
     },
     /**
-     * get shape temp layer canvas
+     * get canvas tied to the layer
      * @name getCanvas
      * @methodOf Kinetic.Shape.prototype
      */
     getCanvas: function() {
-        return this.tempLayer.getCanvas();
+        return this.getLayer().getCanvas();
     },
     /**
      * helper method to stroke the shape and apply
@@ -55,15 +51,14 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name stroke
      * @methodOf Kinetic.Shape.prototype
      */
-    stroke: function() {
+    stroke: function(context) {
         var go = Kinetic.Global;
         var appliedShadow = false;
-        var context = this.getContext();
 
         if(this.attrs.stroke || this.attrs.strokeWidth) {
             context.save();
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             var stroke = this.attrs.stroke ? this.attrs.stroke : 'black';
@@ -71,12 +66,12 @@ Kinetic.Shape = Kinetic.Node.extend({
 
             context.lineWidth = strokeWidth;
             context.strokeStyle = stroke;
-            context.stroke();
+            context.stroke(context);
             context.restore();
         }
 
         if(appliedShadow) {
-            this.stroke();
+            this.stroke(context);
         }
     },
     /**
@@ -85,16 +80,15 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name fill
      * @methodOf Kinetic.Shape.prototype
      * */
-    fill: function() {
+    fill: function(context) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
 
         var fill = this.attrs.fill;
 
         if(fill) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             var s = fill.start;
@@ -105,7 +99,7 @@ Kinetic.Shape = Kinetic.Node.extend({
             if( typeof fill == 'string') {
                 f = this.attrs.fill;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             // pattern
             else if(fill.image) {
@@ -122,12 +116,11 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
 
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
                 context.restore();
             }
             // linear gradient
             else if(!s.radius && !e.radius) {
-                var context = this.getContext();
                 var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
                 var colorStops = fill.colorStops;
 
@@ -137,11 +130,10 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
                 f = grd;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             // radial gradient
             else if((s.radius || s.radius === 0) && (e.radius || e.radius === 0)) {
-                var context = this.getContext();
                 var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
                 var colorStops = fill.colorStops;
 
@@ -151,18 +143,18 @@ Kinetic.Shape = Kinetic.Node.extend({
                 }
                 f = grd;
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
             else {
                 f = 'black';
                 context.fillStyle = f;
-                context.fill();
+                context.fill(context);
             }
         }
         context.restore();
 
         if(appliedShadow) {
-            this.fill();
+            this.fill(context);
         }
     },
     /**
@@ -171,13 +163,12 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name fillText
      * @methodOf Kinetic.Shape.prototype
      */
-    fillText: function(text) {
+    fillText: function(context, text) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
         if(this.attrs.textFill) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
             context.fillStyle = this.attrs.textFill;
             context.fillText(text, 0, 0);
@@ -185,7 +176,7 @@ Kinetic.Shape = Kinetic.Node.extend({
         context.restore();
 
         if(appliedShadow) {
-            this.fillText(text, 0, 0);
+            this.fillText(context, text, 0, 0);
         }
     },
     /**
@@ -195,13 +186,12 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @methodOf Kinetic.Shape.prototype
      * @param {String} text
      */
-    strokeText: function(text) {
+    strokeText: function(context, text) {
         var appliedShadow = false;
-        var context = this.getContext();
         context.save();
         if(this.attrs.textStroke || this.attrs.textStrokeWidth) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
 
             // defaults
@@ -213,12 +203,12 @@ Kinetic.Shape = Kinetic.Node.extend({
             }
             context.lineWidth = this.attrs.textStrokeWidth;
             context.strokeStyle = this.attrs.textStroke;
-            context.strokeText(text, 0, 0);
+            context.strokeText(context, text, 0, 0);
         }
         context.restore();
 
         if(appliedShadow) {
-            this.strokeText(text, 0, 0);
+            this.strokeText(context, text, 0, 0);
         }
     },
     /**
@@ -229,21 +219,20 @@ Kinetic.Shape = Kinetic.Node.extend({
      */
     drawImage: function() {
         var appliedShadow = false;
-        var context = this.getContext();
+        var context = arguments[0];
         context.save();
         var a = Array.prototype.slice.call(arguments);
 
-        if(a.length === 5 || a.length === 9) {
+        if(a.length === 6 || a.length === 10) {
             if(this.attrs.shadow && !this.appliedShadow) {
-                appliedShadow = this._applyShadow();
+                appliedShadow = this._applyShadow(context);
             }
-            switch(a.length) {
-                case 5:
-                    context.drawImage(a[0], a[1], a[2], a[3], a[4]);
-                    break;
-                case 9:
-                    context.drawImage(a[0], a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8]);
-                    break;
+            
+            if(a.length === 6) {
+                context.drawImage(a[1], a[2], a[3], a[4], a[5]);
+            }
+            else {
+                context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
             }
         }
 
@@ -259,8 +248,7 @@ Kinetic.Shape = Kinetic.Node.extend({
      * @name applyLineJoin
      * @methodOf Kinetic.Shape.prototype
      */
-    applyLineJoin: function() {
-        var context = this.getContext();
+    applyLineJoin: function(context) {
         if(this.attrs.lineJoin) {
             context.lineJoin = this.attrs.lineJoin;
         }
@@ -269,8 +257,7 @@ Kinetic.Shape = Kinetic.Node.extend({
      * apply shadow.  return true if shadow was applied
      * and false if it was not
      */
-    _applyShadow: function() {
-        var context = this.getContext();
+    _applyShadow: function(context) {
         var s = this.attrs.shadow;
         if(s) {
             var aa = this.getAbsoluteAlpha();
@@ -308,12 +295,12 @@ Kinetic.Shape = Kinetic.Node.extend({
 
         // path detection
         if(this.attrs.detectionType === 'path') {
-            var pathLayer = stage.pathLayer;
-            var pathLayerContext = pathLayer.getContext();
+            var pathCanvas = stage.pathCanvas;
+            var pathCanvasContext = pathCanvas.getContext();
 
-            this._draw(pathLayer);
+            this._draw(pathCanvas);
 
-            return pathLayerContext.isPointInPath(pos.x, pos.y);
+            return pathCanvasContext.isPointInPath(pos.x, pos.y);
         }
 
         // pixel detection
@@ -326,10 +313,10 @@ Kinetic.Shape = Kinetic.Node.extend({
         // default
         return false;
     },
-    _draw: function(layer) {
-        if(layer && this.attrs.drawFunc) {
-            var stage = layer.getStage();
-            var context = layer.getContext();
+    _draw: function(canvas) {
+        if(this.attrs.drawFunc) {
+            var stage = this.getStage();
+            var context = canvas.getContext();
             var family = [];
             var parent = this.parent;
 
@@ -348,8 +335,6 @@ Kinetic.Shape = Kinetic.Node.extend({
                 context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
             }
 
-            this.tempLayer = layer;
-
             /*
              * pre styles include alpha, linejoin
              */
@@ -357,11 +342,11 @@ Kinetic.Shape = Kinetic.Node.extend({
             if(absAlpha !== 1) {
                 context.globalAlpha = absAlpha;
             }
-            this.applyLineJoin();
+            this.applyLineJoin(context);
 
             // draw the shape
             this.appliedShadow = false;
-            this.attrs.drawFunc.call(this);
+            this.attrs.drawFunc.call(this, canvas.getContext());
             context.restore();
         }
     }
diff --git a/src/Stage.js b/src/Stage.js
index 90879530..588cac4a 100644
--- a/src/Stage.js
+++ b/src/Stage.js
@@ -85,8 +85,8 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function(layer) {
-        this._draw(layer);
+    draw: function(canvas) {
+        this._draw(canvas);
     },
     /**
      * set stage size
@@ -288,37 +288,25 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Number} [quality]
      */
     toDataURL: function(callback, mimeType, quality) {
-        /*
-         * we need to create a temp layer rather than using
-         * the bufferLayer because the stage toDataURL method
-         * is asynchronous, which means that other parts of the
-         * code base could be updating or clearing the bufferLayer
-         * while the stage toDataURL method is processing
-         */
-        var tempLayer = new Kinetic.Layer();
-        tempLayer.getCanvas().width = this.attrs.width;
-        tempLayer.getCanvas().height = this.attrs.height;
-        tempLayer.parent = this;
-        var tempCanvas = tempLayer.getCanvas();
-        var tempContext = tempLayer.getContext();
-
+        var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height);
+        var context = canvas.getContext();
         var layers = this.children;
 
         function drawLayer(n) {
             var layer = layers[n];
-            var layerUrl;
+            var canvasUrl;
             try {
                 // If this call fails (due to browser bug, like in Firefox 3.6),
                 // then revert to previous no-parameter image/png behavior
-                layerUrl = layer.getCanvas().toDataURL(mimeType, quality);
+                canvasUrl = canvas.getElement().toDataURL(mimeType, quality);
             }
             catch(e) {
-                layerUrl = layer.getCanvas().toDataURL();
+                canvasUrl = canvas.getElement().toDataURL();
             }
 
             var imageObj = new Image();
             imageObj.onload = function() {
-                tempContext.drawImage(imageObj, 0, 0);
+                context.drawImage(imageObj, 0, 0);
 
                 if(n < layers.length - 1) {
                     drawLayer(n + 1);
@@ -327,14 +315,14 @@ Kinetic.Stage = Kinetic.Container.extend({
                     try {
                         // If this call fails (due to browser bug, like in Firefox 3.6),
                         // then revert to previous no-parameter image/png behavior
-                        callback(tempLayer.getCanvas().toDataURL(mimeType, quality));
+                        callback(canvas.getElement().toDataURL(mimeType, quality));
                     }
                     catch(e) {
-                        callback(tempLayer.getCanvas().toDataURL());
+                        callback(canvas.getElement().toDataURL());
                     }
                 }
             };
-            imageObj.src = layerUrl;
+            imageObj.src = canvasUrl;
         }
         drawLayer(0);
     },
@@ -360,18 +348,15 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.content.style.width = width + 'px';
         this.content.style.height = height + 'px';
 
-        // set buffer layer and path layer sizes
-        this.bufferLayer.getCanvas().width = width;
-        this.bufferLayer.getCanvas().height = height;
-        this.pathLayer.getCanvas().width = width;
-        this.pathLayer.getCanvas().height = height;
+        // set buffer canvas and path canvas sizes
+        this.bufferCanvas.setSize(width, height);
+        this.pathCanvas.setSize(width, height);
 
         // set user defined layer dimensions
         var layers = this.children;
         for(var n = 0; n < layers.length; n++) {
             var layer = layers[n];
-            layer.getCanvas().width = width;
-            layer.getCanvas().height = height;
+            layer.getCanvas().setSize(width, height);
             layer.draw();
         }
     },
@@ -395,12 +380,11 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @param {Layer} layer
      */
     _add: function(layer) {
-        layer.canvas.width = this.attrs.width;
-        layer.canvas.height = this.attrs.height;
+        layer.canvas.setSize(this.attrs.width, this.attrs.height);
 
         // draw layer and append canvas to container
         layer.draw();
-        this.content.appendChild(layer.canvas);
+        this.content.appendChild(layer.canvas.element);
 
         /*
          * set layer last draw time to zero
@@ -603,7 +587,7 @@ Kinetic.Stage = Kinetic.Container.extend({
 
         this._setMousePosition(evt);
         this._setTouchPosition(evt);
-        this.pathLayer.clear();
+        this.pathCanvas.clear();
 
         /*
          * loop through layers.  If at any point an event
@@ -794,28 +778,6 @@ Kinetic.Stage = Kinetic.Container.extend({
             left: left
         };
     },
-    /**
-     * modify path context
-     * @param {CanvasContext} context
-     */
-    _modifyPathContext: function(context) {
-        context.stroke = function() {
-        };
-        context.fill = function() {
-        };
-        context.fillRect = function(x, y, width, height) {
-            context.rect(x, y, width, height);
-        };
-        context.strokeRect = function(x, y, width, height) {
-            context.rect(x, y, width, height);
-        };
-        context.drawImage = function() {
-        };
-        context.fillText = function() {
-        };
-        context.strokeText = function() {
-        };
-    },
     /**
      * end drag and drop
      */
@@ -910,34 +872,15 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.content.className = 'kineticjs-content';
         this.attrs.container.appendChild(this.content);
 
-        // default layers
-        this.bufferLayer = new Kinetic.Layer({
-            name: 'bufferLayer'
+        this.bufferCanvas = new Kinetic.Canvas({
+            width: this.attrs.width,
+            height: this.attrs.height
         });
-        this.pathLayer = new Kinetic.Layer({
-            name: 'pathLayer'
+        this.pathCanvas = new Kinetic.Canvas({
+            width: this.attrs.width,
+            height: this.attrs.height
         });
-
-        // set parents
-        this.bufferLayer.parent = this;
-        this.pathLayer.parent = this;
-
-        // customize back stage context
-        this._modifyPathContext(this.pathLayer.context);
-
-        // hide canvases
-        this.bufferLayer.getCanvas().style.display = 'none';
-        this.pathLayer.getCanvas().style.display = 'none';
-
-        // add buffer layer
-        this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
-        this.content.appendChild(this.bufferLayer.canvas);
-
-        // add path layer
-        this.pathLayer.canvas.className = 'kineticjs-path-layer';
-        this.content.appendChild(this.pathLayer.canvas);
-
-        this.setSize(this.attrs.width, this.attrs.height);
+        this.pathCanvas.strip();
         this._resizeDOM();
     },
     _addId: function(node) {
@@ -1018,8 +961,8 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.anim = undefined;
         this.animRunning = false;
     },
-    _draw: function(layer) {
-        this._drawChildren(layer);
+    _draw: function(canvas) {
+        this._drawChildren(canvas);
     }
 });
 
diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js
index 1dc385b9..9dd1f02e 100644
--- a/src/shapes/Ellipse.js
+++ b/src/shapes/Ellipse.js
@@ -18,9 +18,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
 
         this.shapeType = "Ellipse";
 
-        config.drawFunc = function() {
-            var canvas = this.getCanvas();
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var r = this.getRadius();
             context.beginPath();
             context.save();
@@ -30,8 +28,8 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
             context.arc(0, 0, r.x, 0, Math.PI * 2, true);
             context.restore();
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/Image.js b/src/shapes/Image.js
index 42302f7d..0488c492 100644
--- a/src/shapes/Image.js
+++ b/src/shapes/Image.js
@@ -14,18 +14,16 @@
 Kinetic.Image = Kinetic.Shape.extend({
     init: function(config) {
         this.shapeType = "Image";
-        config.drawFunc = function() {
+        config.drawFunc = function(context) {
             if(!!this.attrs.image) {
                 var width = this.getWidth();
                 var height = this.getHeight();
-                var canvas = this.getCanvas();
-                var context = this.getContext();
 
                 context.beginPath();
                 context.rect(0, 0, width, height);
                 context.closePath();
-                this.fill();
-                this.stroke();
+                this.fill(context);
+                this.stroke(context);
 
                 // if cropping
                 if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
@@ -33,11 +31,11 @@ Kinetic.Image = Kinetic.Shape.extend({
                     var cropY = this.attrs.crop.y ? this.attrs.crop.y : 0;
                     var cropWidth = this.attrs.crop.width;
                     var cropHeight = this.attrs.crop.height;
-                    this.drawImage(this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
+                    this.drawImage(context, this.attrs.image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height);
                 }
                 // no cropping
                 else {
-                    this.drawImage(this.attrs.image, 0, 0, width, height);
+                    this.drawImage(context, this.attrs.image, 0, 0, width, height);
                 }
             }
         };
diff --git a/src/shapes/Line.js b/src/shapes/Line.js
index a01ffc57..ccea9171 100644
--- a/src/shapes/Line.js
+++ b/src/shapes/Line.js
@@ -17,8 +17,7 @@ Kinetic.Line = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Line";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var lastPos = {};
             context.beginPath();
 
@@ -31,7 +30,7 @@ Kinetic.Line = Kinetic.Shape.extend({
                     // draw dashed line
                     var lastX = this.attrs.points[n - 1].x;
                     var lastY = this.attrs.points[n - 1].y;
-                    this._dashedLine(lastX, lastY, x, y, this.attrs.dashArray);
+                    this._dashedLine(context, lastX, lastY, x, y, this.attrs.dashArray);
                 }
                 else {
                     // draw normal line
@@ -43,7 +42,7 @@ Kinetic.Line = Kinetic.Shape.extend({
                 context.lineCap = this.attrs.lineCap;
             }
 
-            this.stroke();
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
@@ -51,8 +50,7 @@ Kinetic.Line = Kinetic.Shape.extend({
     /**
      * draw dashed line.  Written by Phrogz
      */
-    _dashedLine: function(x, y, x2, y2, dashArray) {
-        var context = this.getContext();
+    _dashedLine: function(context, x, y, x2, y2, dashArray) {
         var dashCount = dashArray.length;
 
         var dx = (x2 - x), dy = (y2 - y);
diff --git a/src/shapes/Path.js b/src/shapes/Path.js
index 4fcf9c89..2f156d64 100644
--- a/src/shapes/Path.js
+++ b/src/shapes/Path.js
@@ -14,8 +14,7 @@ Kinetic.Path = Kinetic.Shape.extend({
         this.dataArray = [];
         var that = this;
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             var ca = this.dataArray;
             // context position
             context.beginPath();
@@ -56,8 +55,8 @@ Kinetic.Path = Kinetic.Shape.extend({
                         break;
                 }
             }
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js
index f6cd3436..2de679e1 100644
--- a/src/shapes/Polygon.js
+++ b/src/shapes/Polygon.js
@@ -14,16 +14,15 @@ Kinetic.Polygon = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Polygon";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             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.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js
index dbcb4a5f..4a819caf 100644
--- a/src/shapes/Rect.js
+++ b/src/shapes/Rect.js
@@ -17,8 +17,7 @@ Kinetic.Rect = Kinetic.Shape.extend({
 
         this.shapeType = "Rect";
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             if(this.attrs.cornerRadius === 0) {
                 // simple rect - don't bother doing all that complicated maths stuff.
@@ -38,8 +37,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js
index d9083a62..3769da87 100644
--- a/src/shapes/RegularPolygon.js
+++ b/src/shapes/RegularPolygon.js
@@ -15,8 +15,7 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
         });
 
         this.shapeType = "RegularPolygon";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             context.moveTo(0, 0 - this.attrs.radius);
 
@@ -26,8 +25,8 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
                 context.lineTo(x, y);
             }
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js
index b17e3f55..e52c588b 100644
--- a/src/shapes/Sprite.js
+++ b/src/shapes/Sprite.js
@@ -14,9 +14,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
             frameRate: 17
         });
 
-        config.drawFunc = function() {
+        config.drawFunc = function(context) {
             if(!!this.attrs.image) {
-                var context = this.getContext();
                 var anim = this.attrs.animation;
                 var index = this.attrs.index;
                 var f = this.attrs.animations[anim][index];
@@ -25,7 +24,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
                 context.rect(0, 0, f.width, f.height);
                 context.closePath();
 
-                this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
+                this.drawImage(context, this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
             }
         };
         // call super constructor
diff --git a/src/shapes/Star.js b/src/shapes/Star.js
index a32c6129..0f6281b8 100644
--- a/src/shapes/Star.js
+++ b/src/shapes/Star.js
@@ -16,8 +16,7 @@ Kinetic.Star = Kinetic.Shape.extend({
         });
 
         this.shapeType = "Star";
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             context.beginPath();
             context.moveTo(0, 0 - this.attrs.outerRadius);
 
@@ -29,8 +28,8 @@ Kinetic.Star = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         // call super constructor
         this._super(config);
diff --git a/src/shapes/Text.js b/src/shapes/Text.js
index 0be98b80..addda99e 100644
--- a/src/shapes/Text.js
+++ b/src/shapes/Text.js
@@ -27,8 +27,7 @@ Kinetic.Text = Kinetic.Shape.extend({
         this.dummyCanvas = document.createElement('canvas');
         this.shapeType = "Text";
 
-        config.drawFunc = function() {
-            var context = this.getContext();
+        config.drawFunc = function(context) {
             /*
              * draw rect
              */
@@ -54,8 +53,8 @@ Kinetic.Text = Kinetic.Shape.extend({
             }
             context.closePath();
 
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
             /*
              * draw text
              */
@@ -83,8 +82,8 @@ Kinetic.Text = Kinetic.Shape.extend({
                     context.translate((this.getBoxWidth() - this._getTextSize(text).width - p * 2) / 2, 0);
                 }
 
-                this.fillText(text);
-                this.strokeText(text);
+                this.fillText(context, text);
+                this.strokeText(context, text);
                 context.restore();
 
                 context.translate(0, lineHeightPx);
diff --git a/src/util/Canvas.js b/src/util/Canvas.js
new file mode 100644
index 00000000..5f17d66f
--- /dev/null
+++ b/src/util/Canvas.js
@@ -0,0 +1,96 @@
+///////////////////////////////////////////////////////////////////////
+//  Canvas
+///////////////////////////////////////////////////////////////////////
+/**
+ * Canvas wrapper constructor
+ * @constructor
+ * @param {Number} width
+ * @param {Number} height
+ */
+Kinetic.Canvas = function(width, height) {
+    this.element = document.createElement('canvas');
+    this.context = this.element.getContext('2d');
+
+    // set dimensions
+    this.element.width = width;
+    this.element.height = height;
+};
+
+Kinetic.Canvas.prototype = {
+    /**
+     * clear canvas
+     * @name clear
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    clear: function() {
+        var context = this.getContext();
+        var el = this.getElement();
+        context.clearRect(0, 0, el.width, el.height);
+    },
+    /**
+     * get element
+     * @name getElement
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    getElement: function() {
+        return this.element;
+    },
+    /**
+     * get context
+     * @name getContext
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    getContext: function() {
+        return this.context;
+    },
+    /**
+     * set width
+     * @name setWidth
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setWidth: function(width) {
+        this.element.width = width;
+    },
+    /**
+     * set height
+     * @name setHeight
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setHeight: function(height) {
+        this.element.height = height;
+    },
+    /**
+     * set size
+     * @name setSize
+     * @methodOf Kinetic.Canvas.prototype
+     */
+    setSize: function(width, height) {
+        this.setWidth(width);
+        this.setHeight(height);
+    },
+    /**
+     * strip away all functions that draw pixels onto the bitmap
+     * @name strip
+     * @methodOf Kinetic.Canvas.prototype
+     * @param {CanvasContext} context
+     */
+    strip: function() {
+        var context = this.context;
+        context.stroke = function() {
+        };
+        context.fill = function() {
+        };
+        context.fillRect = function(x, y, width, height) {
+            context.rect(x, y, width, height);
+        };
+        context.strokeRect = function(x, y, width, height) {
+            context.rect(x, y, width, height);
+        };
+        context.drawImage = function() {
+        };
+        context.fillText = function() {
+        };
+        context.strokeText = function() {
+        };
+    }
+};
diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js
index 4c52baff..fc88c0e7 100644
--- a/tests/js/functionalTests.js
+++ b/tests/js/functionalTests.js
@@ -152,7 +152,7 @@ Test.prototype.tests = {
                 context.quadraticCurveTo(300, 100, 260, 170);
                 context.closePath();
                 context.fillStyle = 'blue';
-                context.fill();
+                context.fill(context);
             },
             draggable: true
         });
diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js
index e23b632c..0926a557 100644
--- a/tests/js/manualTests.js
+++ b/tests/js/manualTests.js
@@ -1349,8 +1349,7 @@ Test.prototype.tests = {
             rect.rotate(0.01);
             layer.draw();
         });
-        //stage.start();
-
+        stage.start();
     },
     'STAGE - hide stage': function(containerId) {
         var stage = new Kinetic.Stage({
diff --git a/tests/js/performanceTests.js b/tests/js/performanceTests.js
index 5fa89448..cc05bce4 100644
--- a/tests/js/performanceTests.js
+++ b/tests/js/performanceTests.js
@@ -25,7 +25,7 @@ Test.prototype.tests = {
         var imageData = context.getImageData(7, 7, 106, 106);
         endTimer('create image data');
 
-        layer.clear();
+        layer.canvas.clear();
 
         startTimer();
         for(var n = 0; n < 10000; n++) {
@@ -62,7 +62,7 @@ Test.prototype.tests = {
 
         var imageObj = new Image();
         imageObj.onload = function() {
-            layer.clear();
+            layer.canvas.clear();
 
             startTimer();
             for(var n = 0; n < 10000; n++) {
diff --git a/tests/js/unitTests.js b/tests/js/unitTests.js
index 92aa3383..9aafb825 100644
--- a/tests/js/unitTests.js
+++ b/tests/js/unitTests.js
@@ -68,8 +68,8 @@ Test.prototype.tests = {
         test(stage.getSize().height === 155, 'stage height should be 155');
         test(stage.getDOM().style.width === '333px', 'content width should be 333');
         test(stage.getDOM().style.height === '155px', 'content height should be 155px');
-        test(layer.getCanvas().width === 333, 'layer canvas width should be 333');
-        test(layer.getCanvas().height === 155, 'layer canvas width should be 155');
+        test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333');
+        test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155');
     },
     'STAGE - add shape then stage then layer': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -340,15 +340,14 @@ Test.prototype.tests = {
         var layer = new Kinetic.Layer();
         var group = new Kinetic.Group();
 
-        var drawTriangle = function() {
-            var context = this.getContext();
+        var drawTriangle = function(context) {
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
             context.quadraticCurveTo(300, 100, 260, 170);
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         var triangle = new Kinetic.Shape({
             drawFunc: drawTriangle,
@@ -388,15 +387,14 @@ Test.prototype.tests = {
             height: 200
         });
 
-        var drawTriangle = function() {
-            var context = this.getContext();
+        var drawTriangle = function(context) {
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
             context.quadraticCurveTo(300, 100, 260, 170);
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         };
         var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"clearBeforeDraw":true,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"listen":true},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"listen":true},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"listen":true,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
         stage.load(json);
@@ -2167,7 +2165,7 @@ Test.prototype.tests = {
             setTimeout(function() {
                 sprite.setAnimation('kicking');
 
-                sprite.afterFrame(0, function() {
+                sprite.afterFrame(5, function() {
                     sprite.setAnimation('standing');
                 });
             }, 2000);
@@ -2720,15 +2718,14 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
-            drawFunc: function() {
-                var context = this.getContext();
+            drawFunc: function(context) {
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
                 context.lineTo(100, 100);
                 context.closePath();
-                this.fill();
-                this.stroke();
+                this.fill(context);
+                this.stroke(context);
             },
             x: 200,
             y: 100,
@@ -2748,15 +2745,14 @@ Test.prototype.tests = {
         });
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
-            drawFunc: function() {
-                var context = this.getContext();
+            drawFunc: function(context) {
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
                 context.lineTo(100, 100);
                 context.closePath();
-                this.fill();
-                this.stroke();
+                this.fill(context);
+                this.stroke(context);
             },
             x: 200,
             y: 100,
@@ -2765,15 +2761,14 @@ Test.prototype.tests = {
             strokeWidth: 5
         });
 
-        shape.setDrawFunc(function() {
-            var context = this.getContext();
+        shape.setDrawFunc(function(context) {
             context.beginPath();
             context.moveTo(0, 0);
             context.lineTo(200, 0);
             context.lineTo(200, 100);
             context.closePath();
-            this.fill();
-            this.stroke();
+            this.fill(context);
+            this.stroke(context);
         });
 
         layer.add(shape);
@@ -4024,6 +4019,8 @@ Test.prototype.tests = {
 
         test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector');
         test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector');
+        
+        layer.draw();
     },
     'NODE - test drag and drop properties and methods': function(containerId) {
         var stage = new Kinetic.Stage({