Merge remote-tracking branch 'upstream/master' into custom-dragBounds

Conflicts:
	dist/kinetic-core.js
	dist/kinetic-core.min.js
	src/Node.js

Thorfile

@@ -4,7 +4,7 @@ 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/Transition.js", "src/filters/Grayscale.js",
-    "src/util/Type.js", "src/util/Canvas.js", "src/util/Class.js", "src/util/Tween.js", "src/util/Transform.js",
+    "src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js",
     "src/Animation.js", "src/Node.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js", 
     "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
   ]

src/Container.js

@@ -30,10 +30,14 @@
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
  */
-Kinetic.Container = Kinetic.Node.extend({
-    init: function(config) {
+Kinetic.Container = function(config) {
+    this._containerInit(config);
+};
+
+Kinetic.Container.prototype = {
+    _containerInit: function(config) {
         this.children = [];
-        this._super(config);
+        Kinetic.Node.call(this, config);
     },
     /**
      * get children
@@ -226,24 +230,6 @@ Kinetic.Container = Kinetic.Node.extend({
 
         return arr;
     },
-    /**
-     * draw children
-     */
-    _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(canvas);
-                }
-            }
-            else {
-                child.draw(canvas);
-            }
-        }
-    },
     /**
      * set children indices
      */
@@ -252,4 +238,5 @@ Kinetic.Container = Kinetic.Node.extend({
             this.children[n].index = n;
         }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);

src/Global.js

@@ -10,9 +10,13 @@ Kinetic.Filters = {};
 Kinetic.Plugins = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
+    BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
+    BUFFER_BLACKLIST: ['shadow'],
     stages: [],
     idCounter: 0,
     tempNodes: {},
+    //shapes hash.  rgb keys and shape values
+    shapes: {},
     maxDragTimeInterval: 20,
     drag: {
         moving: false,
@@ -27,6 +31,13 @@ Kinetic.Global = {
             console.warn('Kinetic warning: ' + str);
         }
     },
+    extend: function(c1, c2) {
+        for(var key in c2.prototype) {
+            if(!( key in c1.prototype)) {
+                c1.prototype[key] = c2.prototype[key];
+            }
+        }
+    },
     _pullNodes: function(stage) {
         var tempNodes = this.tempNodes;
         for(var key in tempNodes) {

src/Group.js

@@ -12,7 +12,7 @@
  * @param {Boolean} [config.listening] whether or not the node is listening for events
  * @param {String} [config.id] unique id
  * @param {String} [config.name] non-unique name
- * @param {Number} [config.alpha] determines node opacity.  Can be any number between 0 and 1
+ * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
  * @param {Object} [config.scale]
  * @param {Number} [config.scale.x]
  * @param {Number} [config.scale.y]
@@ -30,19 +30,16 @@
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
  */
-Kinetic.Group = Kinetic.Container.extend({
-    init: function(config) {
+Kinetic.Group = function(config) {
+    this._initGroup(config);
+};
+
+Kinetic.Group.prototype = {
+    _initGroup: function(config) {
         this.nodeType = 'Group';
 
         // call super constructor
-        this._super(config);
-    },
-    draw: function(canvas) {
-        this._draw(canvas);
-    },
-    _draw: function(canvas) {
-        if(this.attrs.visible) {
-            this._drawChildren(canvas);
-        }
+        Kinetic.Container.call(this, config);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Group, Kinetic.Container);

src/Layer.js

@@ -15,7 +15,7 @@
  * @param {Boolean} [config.listening] whether or not the node is listening for events
  * @param {String} [config.id] unique id
  * @param {String} [config.name] non-unique name
- * @param {Number} [config.alpha] determines node opacity.  Can be any number between 0 and 1
+ * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
  * @param {Object} [config.scale]
  * @param {Number} [config.scale.x]
  * @param {Number} [config.scale.y]
@@ -33,22 +33,26 @@
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
  */
-Kinetic.Layer = Kinetic.Container.extend({
-    init: function(config) {
+Kinetic.Layer = function(config) {
+    this._initLayer(config);
+};
+
+Kinetic.Layer.prototype = {
+    _initLayer: function(config) {
         this.setDefaultAttrs({
             clearBeforeDraw: true
         });
 
         this.nodeType = 'Layer';
-        this.lastDrawTime = 0;
         this.beforeDrawFunc = undefined;
         this.afterDrawFunc = undefined;
-
         this.canvas = new Kinetic.Canvas();
         this.canvas.getElement().style.position = 'absolute';
+        this.bufferCanvas = new Kinetic.Canvas();
+        this.bufferCanvas.name = 'buffer';
 
         // call super constructor
-        this._super(config);
+        Kinetic.Container.call(this, config);
     },
     /**
      * draw children nodes.  this includes any groups
@@ -57,7 +61,41 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @methodOf Kinetic.Layer.prototype
      */
     draw: function(canvas) {
-        this._draw(canvas);
+        // before draw  handler
+        if(this.beforeDrawFunc !== undefined) {
+            this.beforeDrawFunc.call(this);
+        }
+
+        if(canvas) {
+            this._draw(canvas);
+        }
+        else {
+            this._draw(this.getCanvas());
+            this._draw(this.bufferCanvas);
+        }
+
+        // after draw  handler
+        if(this.afterDrawFunc !== undefined) {
+            this.afterDrawFunc.call(this);
+        }
+    },
+    /**
+     * draw children nodes on buffer.  this includes any groups
+     *  or shapes
+     * @name drawBuffer
+     * @methodOf Kinetic.Layer.prototype
+     */
+    drawBuffer: function() {
+        this.draw(this.bufferCanvas);
+    },
+    /**
+     * draw children nodes on scene.  this includes any groups
+     *  or shapes
+     * @name drawScene
+     * @methodOf Kinetic.Layer.prototype
+     */
+    drawScene: function() {
+        this.draw(this.getCanvas());
     },
     /**
      * set before draw handler
@@ -132,46 +170,13 @@ Kinetic.Layer = Kinetic.Container.extend({
         }
         return canvas.toDataURL(mimeType, quality);
     },
-    /**
-     * private draw children
-     */
-    _draw: function(canvas) {
-        /*
-         * if canvas is not defined, then use the canvas
-         * tied to the layer
-         */
-        if(!canvas) {
-            canvas = this.getCanvas();
-        }
-
-        var time = new Date().getTime();
-        this.lastDrawTime = time;
-
-        // before draw  handler
-        if(this.beforeDrawFunc !== undefined) {
-            this.beforeDrawFunc.call(this);
-        }
-
+    __draw: function(canvas) {
         if(this.attrs.clearBeforeDraw) {
             canvas.clear();
         }
-
-        if(this.isVisible()) {
-            // draw custom func
-            if(this.attrs.drawFunc !== undefined) {
-                this.attrs.drawFunc.call(this);
-            }
-
-            // draw children
-            this._drawChildren(canvas);
-        }
-
-        // after draw  handler
-        if(this.afterDrawFunc !== undefined) {
-            this.afterDrawFunc.call(this);
-        }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
 
 // add getters and setters
 Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);

src/Node.js

@@ -13,7 +13,7 @@
  * @param {Boolean} [config.listening] whether or not the node is listening for events
  * @param {String} [config.id] unique id
  * @param {String} [config.name] non-unique name
- * @param {Number} [config.alpha] determines node opacity.  Can be any number between 0 and 1
+ * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
  * @param {Object} [config.scale]
  * @param {Number} [config.scale.x]
  * @param {Number} [config.scale.y]
@@ -32,13 +32,17 @@
  * @param {Number} [config.dragBounds.left]
  * @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
  */
-Kinetic.Node = Kinetic.Class.extend({
-    init: function(config) {
+Kinetic.Node = function(config) {
+	this._nodeInit(config);	
+};
+
+Kinetic.Node.prototype = {
+    _nodeInit: function(config) {
         this.defaultNodeAttrs = {
             visible: true,
             listening: true,
             name: undefined,
-            alpha: 1,
+            opacity: 1,
             x: 0,
             y: 0,
             scale: {
@@ -59,7 +63,7 @@ Kinetic.Node = Kinetic.Class.extend({
         this.eventListeners = {};
         this.transAnim = new Kinetic.Animation();
         this.setAttrs(config);
-
+        
         // bind events
         this.on('draggableChange.kinetic', function() {
             this._onDraggableChange();
@@ -562,19 +566,19 @@ Kinetic.Node = Kinetic.Class.extend({
         this.parent._setChildrenIndices();
     },
     /**
-     * get absolute alpha
-     * @name getAbsoluteAlpha
+     * get absolute opacity
+     * @name getAbsoluteOpacity
      * @methodOf Kinetic.Node.prototype
      */
-    getAbsoluteAlpha: function() {
-        var absAlpha = 1;
+    getAbsoluteOpacity: function() {
+        var absOpacity = 1;
         var node = this;
         // traverse upwards
         while(node.nodeType !== 'Stage') {
-            absAlpha *= node.attrs.alpha;
+            absOpacity *= node.attrs.opacity;
             node = node.parent;
         }
-        return absAlpha;
+        return absOpacity;
     },
     /**
      * determine if node is currently in drag and drop mode
@@ -583,7 +587,7 @@ Kinetic.Node = Kinetic.Class.extend({
      */
     isDragging: function() {
         var go = Kinetic.Global;
-        return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving;
+        return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
     },
     /**
      * move node to another container
@@ -651,7 +655,7 @@ Kinetic.Node = Kinetic.Class.extend({
     },
     /**
      * transition node to another state.  Any property that can accept a real
-     *  number can be transitioned, including x, y, rotation, alpha, strokeWidth,
+     *  number can be transitioned, including x, y, rotation, opacity, strokeWidth,
      *  radius, scale.x, scale.y, offset.x, offset.y, etc.
      * @name transitionTo
      * @methodOf Kinetic.Node.prototype
@@ -780,48 +784,6 @@ Kinetic.Node = Kinetic.Class.extend({
         node.setAttrs(obj);
         return node;
     },
-    /**
-     * save image data
-     * @name saveImageData
-     * @methodOf Kinetic.Node.prototype
-     */
-    saveImageData: function(width, height) {
-        try {
-            var canvas;
-            if(width && height) {
-                canvas = new Kinetic.Canvas(width, height);
-            }
-            else {
-                var stage = this.getStage();
-                canvas = stage.bufferCanvas;
-            }
-
-            var context = canvas.getContext();
-            canvas.clear();
-            this._draw(canvas);
-            var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight());
-            this.imageData = imageData;
-        }
-        catch(e) {
-            Kinetic.Global.warn('Image data could not saved because canvas is dirty.');
-        }
-    },
-    /**
-     * clear image data
-     * @name clearImageData
-     * @methodOf Kinetic.Node.prototype
-     */
-    clearImageData: function() {
-        delete this.imageData;
-    },
-    /**
-     * get image data
-     * @name getImageData
-     * @methodOf Kinetic.Node.prototype
-     */
-    getImageData: function() {
-        return this.imageData;
-    },
     /**
      * Creates a composite data URL. If MIME type is not
      * specified, then "image/png" will result. For "image/jpeg", specify a quality
@@ -908,11 +870,6 @@ Kinetic.Node = Kinetic.Class.extend({
             this.attrs[key] = trans[key];
         }
     },
-    _setImageData: function(imageData) {
-        if(imageData && imageData.data) {
-            this.imageData = imageData;
-        }
-    },
     _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
         this._handleEvent('before' + attr.toUpperCase() + 'Change', {
             oldVal: oldVal,
@@ -964,7 +921,7 @@ Kinetic.Node = Kinetic.Class.extend({
             else {
                 stage.dragAnim.node = this.getLayer();
             }
-            stage.dragAnim.start(); 
+            stage.dragAnim.start();
         }
     },
     _onDraggableChange: function() {
@@ -997,25 +954,18 @@ Kinetic.Node = Kinetic.Class.extend({
     /**
      * handle node event
      */
-    _handleEvent: function(eventType, evt) {
+    _handleEvent: function(eventType, evt, compareShape) {
         if(this.nodeType === 'Shape') {
             evt.shape = this;
         }
-
         var stage = this.getStage();
-        var mover = stage ? stage.mouseoverShape : null;
-        var mout = stage ? stage.mouseoutShape : null;
         var el = this.eventListeners;
         var okayToRun = true;
 
-        /*
-         * determine if event handler should be skipped by comparing
-         * parent nodes
-         */
-        if(eventType === 'mouseover' && mout && mout._id === this._id) {
+        if(eventType === 'mouseover' && compareShape && this._id === compareShape._id) {
             okayToRun = false;
         }
-        else if(eventType === 'mouseout' && mover && mover._id === this._id) {
+        else if(eventType === 'mouseout' && compareShape && this._id === compareShape._id) {
             okayToRun = false;
         }
 
@@ -1027,18 +977,38 @@ Kinetic.Node = Kinetic.Class.extend({
                 }
             }
 
-            if(stage && mover && mout) {
-                stage.mouseoverShape = mover.parent;
-                stage.mouseoutShape = mout.parent;
-            }
-
             // simulate event bubbling
             if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
-                this._handleEvent.call(this.parent, eventType, evt);
+                if(compareShape && compareShape.parent) {
+                    this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
+                }
+                else {
+                    this._handleEvent.call(this.parent, eventType, evt);
+                }
             }
         }
-    }
-});
+    },
+    _draw: function(canvas) {
+        if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
+            if(this.__draw) {
+                this.__draw(canvas);
+            }
+
+            var children = this.children;
+            if(children) {
+                for(var n = 0; n < children.length; n++) {
+                    var child = children[n];
+                    if(child.draw) {
+                        child.draw(canvas);
+                    }
+                    else {
+                        child._draw(canvas);
+                    }
+                }
+            }
+        }
+    },
+};
 
 // add getter and setter methods
 Kinetic.Node.addSetters = function(constructor, arr) {
@@ -1080,7 +1050,7 @@ Kinetic.Node._addGetter = function(constructor, attr) {
     };
 };
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'detectionType', 'rotation', 'alpha', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'dragBoundFunc', 'listening']);
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'scale', 'rotation', 'opacity', 'name', 'id', 'offset', 'draggable', 'dragConstraint', 'dragBounds', 'dragBoundFunc', 'listening']);
 Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
 
 /**
@@ -1097,13 +1067,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  * @param {Number} y
  */
 
-/**
- * set detection type
- * @name setDetectionType
- * @methodOf Kinetic.Node.prototype
- * @param {String} type can be path or pixel
- */
-
 /**
  * set node rotation in radians
  * @name setRotation
@@ -1112,12 +1075,12 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  */
 
 /**
- * set alpha.  Alpha values range from 0 to 1.
- *  A node with an alpha of 0 is fully transparent, and a node
- *  with an alpha of 1 is fully opaque
- * @name setAlpha
+ * set opacity.  Opacity values range from 0 to 1.
+ *  A node with an opacity of 0 is fully transparent, and a node
+ *  with an opacity of 1 is fully opaque
+ * @name setOpacity
  * @methodOf Kinetic.Node.prototype
- * @param {Object} alpha
+ * @param {Object} opacity
  */
 
 /**
@@ -1193,12 +1156,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  * @methodOf Kinetic.Node.prototype
  */
 
-/**
- * get detection type.  Can be path or pixel
- * @name getDetectionType
- * @methodOf Kinetic.Node.prototype
- */
-
 /**
  * get rotation in radians
  * @name getRotation
@@ -1206,8 +1163,8 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
  */
 
 /**
- * get alpha.
- * @name getAlpha
+ * get opacity.
+ * @name getOpacity
  * @methodOf Kinetic.Node.prototype
  */
 

src/Shape.js

@@ -33,17 +33,15 @@
  * @config {Obect} [config.shadow.blur.offset]
  * @config {Number} [config.shadow.blur.offset.x]
  * @config {Number} [config.shadow.blur.offset.y]
- * @config {Number} [config.shadow.alpha] shadow alpha.  Can be any real number
+ * @config {Number} [config.shadow.opacity] shadow opacity.  Can be any real number
  *  between 0 and 1
- * @config {String} [config.detectionType] shape detection type.  Can be path or pixel.
- *  The default is path because it performs better
  * @param {Number} [config.x]
  * @param {Number} [config.y]
  * @param {Boolean} [config.visible]
  * @param {Boolean} [config.listening] whether or not the node is listening for events
  * @param {String} [config.id] unique id
  * @param {String} [config.name] non-unique name
- * @param {Number} [config.alpha] determines node opacity.  Can be any number between 0 and 1
+ * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
  * @param {Object} [config.scale]
  * @param {Number} [config.scale.x]
  * @param {Number} [config.scale.y]
@@ -61,17 +59,29 @@
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
  */
-Kinetic.Shape = Kinetic.Node.extend({
-    init: function(config) {
-        this.setDefaultAttrs({
-            detectionType: 'path'
-        });
+Kinetic.Shape = function(config) {
+    this._initShape(config);
+};
 
+Kinetic.Shape.prototype = {
+    _initShape: function(config) {
         this.nodeType = 'Shape';
         this.appliedShadow = false;
 
+        // set colorKey
+        var shapes = Kinetic.Global.shapes;
+        var key;
+        while(true) {
+            key = Kinetic.Type._getRandomColorKey();
+            if(key && !( key in shapes)) {
+                break;
+            }
+        }
+        this.colorKey = key;
+        shapes[key] = this;
+
         // call super constructor
-        this._super(config);
+        Kinetic.Node.call(this, config);
     },
     /**
      * get canvas context tied to the layer
@@ -287,7 +297,7 @@ Kinetic.Shape = Kinetic.Node.extend({
     _applyShadow: function(context) {
         var s = this.attrs.shadow;
         if(s) {
-            var aa = this.getAbsoluteAlpha();
+            var aa = this.getAbsoluteOpacity();
             // defaults
             var color = s.color ? s.color : 'black';
             var blur = s.blur ? s.blur : 5;
@@ -296,8 +306,8 @@ Kinetic.Shape = Kinetic.Node.extend({
                 y: 0
             };
 
-            if(s.alpha) {
-                context.globalAlpha = s.alpha * aa;
+            if(s.opacity) {
+                context.globalAlpha = s.opacity * aa;
             }
             context.shadowColor = color;
             context.shadowBlur = blur;
@@ -319,28 +329,13 @@ Kinetic.Shape = Kinetic.Node.extend({
     intersects: function() {
         var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
         var stage = this.getStage();
-
-        // path detection
-        if(this.attrs.detectionType === 'path') {
-            var pathCanvas = stage.pathCanvas;
-            var pathCanvasContext = pathCanvas.getContext();
-
-            this._draw(pathCanvas);
-
-            return pathCanvasContext.isPointInPath(pos.x, pos.y);
-        }
-
-        // pixel detection
-        if(this.imageData) {
-            var w = stage.attrs.width;
-            var alpha = this.imageData.data[((w * pos.y) + pos.x) * 4 + 3];
-            return (alpha);
-        }
-
-        // default
-        return false;
+        var bufferCanvas = stage.bufferCanvas;
+        bufferCanvas.clear();
+        this._draw(bufferCanvas);
+        var obj = stage.getIntersection(pos);
+        return !!(obj && obj.pixel[3] > 0);
     },
-    _draw: function(canvas) {
+    __draw: function(canvas) {
         if(this.attrs.drawFunc) {
             var stage = this.getStage();
             var context = canvas.getContext();
@@ -362,21 +357,70 @@ Kinetic.Shape = Kinetic.Node.extend({
             }
 
             /*
-             * pre styles include alpha, linejoin
+             * pre styles include opacity, linejoin
              */
-            var absAlpha = this.getAbsoluteAlpha();
-            if(absAlpha !== 1) {
-                context.globalAlpha = absAlpha;
+            var absOpacity = this.getAbsoluteOpacity();
+            if(absOpacity !== 1) {
+                context.globalAlpha = absOpacity;
             }
             this.applyLineJoin(context);
 
             // draw the shape
             this.appliedShadow = false;
+
+            var wl = Kinetic.Global.BUFFER_WHITELIST;
+            var bl = Kinetic.Global.BUFFER_BLACKLIST;
+            var attrs = {};
+
+            if(canvas.name === 'buffer') {
+                for(var n = 0; n < wl.length; n++) {
+                    var key = wl[n];
+                    attrs[key] = this.attrs[key];
+                    if(this.attrs[key] || (key === 'fill' && !this.attrs.stroke && !('image' in this.attrs))) {
+                        this.attrs[key] = '#' + this.colorKey;
+                    }
+                }
+
+                for(var n = 0; n < bl.length; n++) {
+                    var key = bl[n];
+                    attrs[key] = this.attrs[key];
+                    this.attrs[key] = '';
+                }
+
+                // image is a special case
+                if('image' in this.attrs) {
+                    attrs.image = this.attrs.image;
+
+                    if(this.imageBuffer) {
+                        this.attrs.image = this.imageBuffer;
+                    }
+                    else {
+                        this.attrs.image = null;
+                        this.attrs.fill = '#' + this.colorKey;
+                    }
+                }
+
+                context.globalAlpha = 1;
+            }
+
             this.attrs.drawFunc.call(this, canvas.getContext());
+
+            if(canvas.name === 'buffer') {
+                var bothLists = wl.concat(bl);
+                for(var n = 0; n < bothLists.length; n++) {
+                    var key = bothLists[n];
+                    this.attrs[key] = attrs[key];
+                }
+
+                // image is a special case
+                this.attrs.image = attrs.image;
+            }
+
             context.restore();
         }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
 
 // add getters and setters
 Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc', 'filter']);

src/Stage.js

@@ -15,7 +15,7 @@
  * @param {Boolean} [config.listening] whether or not the node is listening for events
  * @param {String} [config.id] unique id
  * @param {String} [config.name] non-unique name
- * @param {Number} [config.alpha] determines node opacity.  Can be any number between 0 and 1
+ * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
  * @param {Object} [config.scale]
  * @param {Number} [config.scale.x]
  * @param {Number} [config.scale.y]
@@ -33,8 +33,12 @@
  * @param {Number} [config.dragBounds.bottom]
  * @param {Number} [config.dragBounds.left]
  */
-Kinetic.Stage = Kinetic.Container.extend({
-    init: function(config) {
+Kinetic.Stage = function(config) {
+    this._initStage(config);
+};
+
+Kinetic.Stage.prototype = {
+    _initStage: function(config) {
         this.setDefaultAttrs({
             width: 400,
             height: 200
@@ -49,7 +53,7 @@ Kinetic.Stage = Kinetic.Container.extend({
         }
 
         // call super constructor
-        this._super(config);
+        Kinetic.Container.call(this, config);
 
         this._setStageDefaultProperties();
         this._id = Kinetic.Global.idCounter++;
@@ -75,8 +79,8 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function(canvas) {
-        this._draw(canvas);
+    draw: function() {
+        this._draw();
     },
     /**
      * set stage size
@@ -344,6 +348,44 @@ Kinetic.Stage = Kinetic.Container.extend({
             }
         });
     },
+    /**
+     * get intersection object that contains shape and pixel data
+     * @name getIntersection
+     * @methodOf Kinetic.Stage.prototype
+     * @param {Object} pos point object
+     */
+    getIntersection: function(pos) {
+        var shape;
+        var layers = this.getChildren();
+
+        /*
+         * traverse through layers from top to bottom and look
+         * for hit detection
+         */
+        for(var n = layers.length - 1; n >= 0; n--) {
+            var layer = layers[n];
+            var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
+            // this indicates that a buffer pixel may have been found
+            if(p[3] === 255) {
+                var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
+                shape = Kinetic.Global.shapes[colorKey];
+                var isDragging = Kinetic.Global.drag.moving;
+
+                return {
+                    shape: shape,
+                    pixel: p
+                };
+            }
+            // if no shape mapped to that pixel, return pixel array
+            else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
+                return {
+                    pixel: p
+                };
+            }
+        }
+
+        return null;
+    },
     _resizeDOM: function() {
         var width = this.attrs.width;
         var height = this.attrs.height;
@@ -352,15 +394,13 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.content.style.width = width + 'px';
         this.content.style.height = height + 'px';
 
-        // 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().setSize(width, height);
+            layer.bufferCanvas.setSize(width, height);
             layer.draw();
         }
     },
@@ -385,234 +425,18 @@ Kinetic.Stage = Kinetic.Container.extend({
      */
     _add: function(layer) {
         layer.canvas.setSize(this.attrs.width, this.attrs.height);
+        layer.bufferCanvas.setSize(this.attrs.width, this.attrs.height);
 
         // draw layer and append canvas to container
         layer.draw();
         this.content.appendChild(layer.canvas.element);
-
-        /*
-         * set layer last draw time to zero
-         * so that throttling doesn't take into account
-         * the layer draws associated with adding a node
-         */
-        layer.lastDrawTime = 0;
     },
-    /**
-     * detect event
-     * @param {Shape} shape
-     */
-    _detectEvent: function(shape, evt) {
-        var isDragging = Kinetic.Global.drag.moving;
-        var go = Kinetic.Global;
-        var pos = this.getUserPosition();
-        var el = shape.eventListeners;
-        var that = this;
-
-        if(this.targetShape && shape._id === this.targetShape._id) {
-            this.targetFound = true;
-        }
-
-        if(shape.isVisible() && pos !== undefined && shape.intersects(pos)) {
-            // handle onmousedown
-            if(!isDragging && this.mouseDown) {
-                this.mouseDown = false;
-                this.clickStart = true;
-                shape._handleEvent('mousedown', evt);
-                return true;
-            }
-            // handle onmouseup & onclick
-            else if(this.mouseUp) {
-                this.mouseUp = false;
-                shape._handleEvent('mouseup', evt);
-
-                // detect if click or double click occurred
-                if(this.clickStart) {
-                    /*
-                     * if dragging and dropping, don't fire click or dbl click
-                     * event
-                     */
-                    if((!go.drag.moving) || !go.drag.node) {
-                        shape._handleEvent('click', evt);
-
-                        if(this.inDoubleClickWindow) {
-                            shape._handleEvent('dblclick', evt);
-                        }
-                        this.inDoubleClickWindow = true;
-                        setTimeout(function() {
-                            that.inDoubleClickWindow = false;
-                        }, this.dblClickWindow);
-                    }
-                }
-                return true;
-            }
-
-            // handle touchstart
-            else if(!isDragging && this.touchStart && !this.touchMove) {
-                this.touchStart = false;
-                this.tapStart = true;
-                shape._handleEvent('touchstart', evt);
-                return true;
-            }
-            // handle touchend & tap
-            else if(this.touchEnd) {
-                this.touchEnd = false;
-                shape._handleEvent('touchend', evt);
-
-                // detect if tap or double tap occurred
-                if(this.tapStart) {
-                    /*
-                     * if dragging and dropping, don't fire tap or dbltap
-                     * event
-                     */
-                    if((!go.drag.moving) || !go.drag.node) {
-                        shape._handleEvent('tap', evt);
-
-                        if(this.inDoubleClickWindow) {
-                            shape._handleEvent('dbltap', evt);
-                        }
-                        this.inDoubleClickWindow = true;
-                        setTimeout(function() {
-                            that.inDoubleClickWindow = false;
-                        }, this.dblClickWindow);
-                    }
-                }
-                return true;
-            }
-            else if(!isDragging && this.touchMove) {
-                shape._handleEvent('touchmove', evt);
-                return true;
-            }
-            /*
-            * NOTE: these event handlers require target shape
-            * handling
-            */
-            // handle onmouseover
-            else if(!isDragging && this._isNewTarget(shape, evt)) {
-                /*
-                 * check to see if there are stored mouseout events first.
-                 * if there are, run those before running the onmouseover
-                 * events
-                 */
-                if(this.mouseoutShape) {
-                    this.mouseoverShape = shape;
-                    this.mouseoutShape._handleEvent('mouseout', evt);
-                    this.mouseoverShape = undefined;
-                }
-
-                shape._handleEvent('mouseover', evt);
-                this._setTarget(shape);
-                return true;
-            }
-            // handle mousemove and touchmove
-            else {
-                if(!isDragging && this.mouseMove) {
-                    shape._handleEvent('mousemove', evt);
-                    return true;
-                }
-            }
-
-        }
-        // handle mouseout condition
-        else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
-            this._setTarget(undefined);
-            this.mouseoutShape = shape;
-            return true;
-        }
-
-        return false;
-    },
-    /**
-     * set new target
-     */
-    _setTarget: function(shape) {
-        this.targetShape = shape;
-        this.targetFound = true;
-    },
-    /**
-     * check if shape should be a new target
-     */
-    _isNewTarget: function(shape, evt) {
-        if(!this.targetShape || (!this.targetFound && shape._id !== this.targetShape._id)) {
-            /*
-             * check if old target has an onmouseout event listener
-             */
-            if(this.targetShape) {
-                var oldEl = this.targetShape.eventListeners;
-                if(oldEl) {
-                    this.mouseoutShape = this.targetShape;
-                }
-            }
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    /**
-     * traverse container children
-     * @param {Container} obj
-     */
-    _traverseChildren: function(obj, evt) {
-        var children = obj.children;
-        // propapgate backwards through children
-        for(var i = children.length - 1; i >= 0; i--) {
-            var child = children[i];
-            if(child.getListening()) {
-                if(child.nodeType === 'Shape') {
-                    var exit = this._detectEvent(child, evt);
-                    if(exit) {
-                        return true;
-                    }
-                }
-                else {
-                    var exit = this._traverseChildren(child, evt);
-                    if(exit) {
-                        return true;
-                    }
-                }
-            }
-        }
-
-        return false;
-    },
-    /**
-     * handle incoming event
-     * @param {Event} evt
-     */
-    _handleStageEvent: function(evt) {
-        var go = Kinetic.Global;
+    _setUserPosition: function(evt) {
         if(!evt) {
             evt = window.event;
         }
-
         this._setMousePosition(evt);
         this._setTouchPosition(evt);
-        this.pathCanvas.clear();
-
-        /*
-         * loop through layers.  If at any point an event
-         * is triggered, break out
-         */
-        this.targetFound = false;
-        var shapeDetected = false;
-        for(var n = this.children.length - 1; n >= 0; n--) {
-            var layer = this.children[n];
-            if(layer.isVisible() && n >= 0 && layer.getListening()) {
-                if(this._traverseChildren(layer, evt)) {
-                    shapeDetected = true;
-                    break;
-                }
-            }
-        }
-
-        /*
-         * if no shape was detected and a mouseout shape has been stored,
-         * then run the onmouseout event handlers
-         */
-        if(!shapeDetected && this.mouseoutShape) {
-            this.mouseoutShape._handleEvent('mouseout', evt);
-            this.mouseoutShape = undefined;
-        }
     },
     /**
      * begin listening for events by adding event handlers
@@ -621,8 +445,7 @@ Kinetic.Stage = Kinetic.Container.extend({
     _bindContentEvents: function() {
         var go = Kinetic.Global;
         var that = this;
-
-        var events = ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'touchstart', 'touchmove', 'touchend'];
+        var events = ['mousedown', 'mousemove', 'mouseup', 'mouseout', 'touchstart', 'touchmove', 'touchend'];
 
         for(var n = 0; n < events.length; n++) {
             var pubEvent = events[n];
@@ -635,15 +458,14 @@ Kinetic.Stage = Kinetic.Container.extend({
             }());
         }
     },
-    _mouseover: function(evt) {
-        this._handleStageEvent(evt);
-    },
     _mouseout: function(evt) {
+        this._setUserPosition(evt);
+        var go = Kinetic.Global;
         // if there's a current target shape, run mouseout handlers
         var targetShape = this.targetShape;
-        if(targetShape) {
+        if(targetShape && !go.drag.moving) {
             targetShape._handleEvent('mouseout', evt);
-            this.targetShape = undefined;
+            this.targetShape = null;
         }
         this.mousePos = undefined;
 
@@ -651,19 +473,45 @@ Kinetic.Stage = Kinetic.Container.extend({
         this._endDrag(evt);
     },
     _mousemove: function(evt) {
-        this.mouseDown = false;
-        this.mouseUp = false;
-        this.mouseMove = true;
-        this._handleStageEvent(evt);
+        this._setUserPosition(evt);
+        var go = Kinetic.Global;
+        var obj = this.getIntersection(this.getUserPosition());
+
+        if(obj) {
+            var shape = obj.shape;
+            if(shape) {
+                if(!go.drag.moving && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
+                    if(this.targetShape) {
+                        this.targetShape._handleEvent('mouseout', evt, shape);
+                    }
+                    shape._handleEvent('mouseover', evt, this.targetShape);
+                    this.targetShape = shape;
+                }
+                else {
+                    shape._handleEvent('mousemove', evt);
+                }
+            }
+        }
+        /*
+         * if no shape was detected, clear target shape and try
+         * to run mouseout from previous target shape
+         */
+        else if(this.targetShape && !go.drag.moving) {
+            this.targetShape._handleEvent('mouseout', evt);
+            this.targetShape = null;
+        }
 
         // start drag and drop
         this._startDrag(evt);
     },
     _mousedown: function(evt) {
-        this.mouseDown = true;
-        this.mouseUp = false;
-        this.mouseMove = false;
-        this._handleStageEvent(evt);
+        this._setUserPosition(evt);
+        var obj = this.getIntersection(this.getUserPosition());
+        if(obj && obj.shape) {
+            var shape = obj.shape;
+            this.clickStart = true;
+            shape._handleEvent('mousedown', evt);
+        }
 
         //init stage drag and drop
         if(this.attrs.draggable) {
@@ -671,21 +519,49 @@ Kinetic.Stage = Kinetic.Container.extend({
         }
     },
     _mouseup: function(evt) {
-        this.mouseDown = false;
-        this.mouseUp = true;
-        this.mouseMove = false;
-        this._handleStageEvent(evt);
+        this._setUserPosition(evt);
+        var go = Kinetic.Global;
+        var obj = this.getIntersection(this.getUserPosition());
+        var that = this;
+        if(obj && obj.shape) {
+            var shape = obj.shape;
+            shape._handleEvent('mouseup', evt);
+
+            // detect if click or double click occurred
+            if(this.clickStart) {
+                /*
+                 * if dragging and dropping, don't fire click or dbl click
+                 * event
+                 */
+                if((!go.drag.moving) || !go.drag.node) {
+                    shape._handleEvent('click', evt);
+
+                    if(this.inDoubleClickWindow) {
+                        shape._handleEvent('dblclick', evt);
+                    }
+                    this.inDoubleClickWindow = true;
+                    setTimeout(function() {
+                        that.inDoubleClickWindow = false;
+                    }, this.dblClickWindow);
+                }
+            }
+        }
         this.clickStart = false;
 
         // end drag and drop
         this._endDrag(evt);
     },
     _touchstart: function(evt) {
+        this._setUserPosition(evt);
         evt.preventDefault();
-        this.touchStart = true;
-        this.touchEnd = false;
-        this.touchMove = false;
-        this._handleStageEvent(evt);
+        var obj = this.getIntersection(this.getUserPosition());
+
+        if(obj && obj.shape) {
+            var shape = obj.shape;
+            this.tapStart = true;
+            shape._handleEvent('touchstart', evt);
+        }
+
         /*
          * init stage drag and drop
          */
@@ -694,20 +570,47 @@ Kinetic.Stage = Kinetic.Container.extend({
         }
     },
     _touchend: function(evt) {
-        this.touchStart = false;
-        this.touchEnd = true;
-        this.touchMove = false;
-        this._handleStageEvent(evt);
+        this._setUserPosition(evt);
+        var go = Kinetic.Global;
+        var obj = this.getIntersection(this.getUserPosition());
+        var that = this;
+        if(obj && obj.shape) {
+            var shape = obj.shape;
+            shape._handleEvent('touchend', evt);
+
+            // detect if tap or double tap occurred
+            if(this.tapStart) {
+                /*
+                 * if dragging and dropping, don't fire tap or dbltap
+                 * event
+                 */
+                if((!go.drag.moving) || !go.drag.node) {
+                    shape._handleEvent('tap', evt);
+
+                    if(this.inDoubleClickWindow) {
+                        shape._handleEvent('dbltap', evt);
+                    }
+                    this.inDoubleClickWindow = true;
+                    setTimeout(function() {
+                        that.inDoubleClickWindow = false;
+                    }, this.dblClickWindow);
+                }
+            }
+        }
+
         this.tapStart = false;
 
         // end drag and drop
         this._endDrag(evt);
     },
     _touchmove: function(evt) {
+        this._setUserPosition(evt);
         evt.preventDefault();
-        this.touchEnd = false;
-        this.touchMove = true;
-        this._handleStageEvent(evt);
+        var obj = this.getIntersection(this.getUserPosition());
+        if(obj && obj.shape) {
+            var shape = obj.shape;
+            shape._handleEvent('touchmove', evt);
+        }
 
         // start drag and drop
         this._startDrag(evt);
@@ -759,13 +662,13 @@ Kinetic.Stage = Kinetic.Container.extend({
         var go = Kinetic.Global;
         var node = go.drag.node;
         if(node) {
-        	if (node.nodeType === 'Stage') {
-        		node.draw();
-        	}
-        	else {
-        		node.getLayer().draw();
-        	}
-        	
+            if(node.nodeType === 'Stage') {
+                node.draw();
+            }
+            else {
+                node.getLayer().draw();
+            }
+
             // handle dragend
             if(go.drag.moving) {
                 go.drag.moving = false;
@@ -853,11 +756,7 @@ Kinetic.Stage = Kinetic.Container.extend({
             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(node) {
@@ -913,35 +812,18 @@ Kinetic.Stage = Kinetic.Container.extend({
     _setStageDefaultProperties: function() {
         this.nodeType = 'Stage';
         this.dblClickWindow = 400;
-        this.targetShape = undefined;
-        this.targetFound = false;
-        this.mouseoverShape = undefined;
-        this.mouseoutShape = undefined;
-
-        // desktop flags
+        this.targetShape = null;
         this.mousePos = undefined;
-        this.mouseDown = false;
-        this.mouseUp = false;
-        this.mouseMove = false;
         this.clickStart = false;
-
-        // mobile flags
         this.touchPos = undefined;
-        this.touchStart = false;
-        this.touchEnd = false;
-        this.touchMove = false;
         this.tapStart = false;
 
         this.ids = {};
         this.names = {};
-        //shapes hash.  rgb keys and shape values
-		this.shapes = {};
-        this.dragAnim = new Kinetic.Animation();   
-    },
-    _draw: function(canvas) {
-        this._drawChildren(canvas);
+        this.dragAnim = new Kinetic.Animation();
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
 
 // add getters and setters
 Kinetic.Node.addGettersSetters(Kinetic.Stage, ['width', 'height']);

src/filters/Grayscale.js

@@ -1,5 +1,5 @@
-Kinetic.Filters.Grayscale = function() {
-    var data = this.imageData.data;
+Kinetic.Filters.Grayscale = function(imageData) {
+    var data = imageData.data;
     for(var i = 0; i < data.length; i += 4) {
         var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
         // red

src/shapes/Ellipse.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Ellipse = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Ellipse = function(config) {
+	this._initEllipse(config);	
+};
+
+Kinetic.Ellipse.prototype = {
+    _initEllipse: function(config) {
         this.setDefaultAttrs({
             radius: {
                 x: 0,
@@ -20,7 +24,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
         config.drawFunc = this.drawFunc;
 
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
         this._convertRadius();
         var that = this;
         this.on('radiusChange.kinetic', function() {
@@ -57,7 +61,8 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
          */
         this.attrs.radius = type._getXY(radius);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
 
 // Circle backwards compatibility
 Kinetic.Circle = Kinetic.Ellipse;

src/shapes/Image.js

@@ -11,24 +11,35 @@
  * @param {Number} [config.height]
  * @param {Object} [config.crop]
  */
-Kinetic.Image = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Image = function(config) {
+    this._initImage(config);
+};
+
+Kinetic.Image.prototype = {
+    _initImage: function(config) {
         this.shapeType = "Image";
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
+
+        var that = this;
+        this.on('imageChange', function(evt) {
+            that._syncSize();
+        });
+
+        this._syncSize();
     },
     drawFunc: function(context) {
+        var width = this.getWidth();
+        var height = this.getHeight();
+
+        context.beginPath();
+        context.rect(0, 0, width, height);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+
         if(this.attrs.image) {
-            var width = this.getWidth();
-            var height = this.getHeight();
-
-            context.beginPath();
-            context.rect(0, 0, width, height);
-            context.closePath();
-            this.fill(context);
-            this.stroke(context);
-
             // if cropping
             if(this.attrs.crop && this.attrs.crop.width && this.attrs.crop.height) {
                 var cropX = this.attrs.crop.x ? this.attrs.crop.x : 0;
@@ -63,34 +74,6 @@ Kinetic.Image = Kinetic.Shape.extend({
             height: this.attrs.height
         };
     },
-    /**
-     * get width
-     * @name getWidth
-     * @methodOf Kinetic.Image.prototype
-     */
-    getWidth: function() {
-        if(this.attrs.width) {
-            return this.attrs.width;
-        }
-        if(this.attrs.image) {
-            return this.attrs.image.width;
-        }
-        return 0;
-    },
-    /**
-     * get height
-     * @name getHeight
-     * @methodOf Kinetic.Image.prototype
-     */
-    getHeight: function() {
-        if(this.attrs.height) {
-            return this.attrs.height;
-        }
-        if(this.attrs.image) {
-            return this.attrs.image.height;
-        }
-        return 0;
-    },
     /**
      * apply filter
      * @name applyFilter
@@ -101,14 +84,14 @@ Kinetic.Image = Kinetic.Shape.extend({
      *  filter has been applied
      */
     applyFilter: function(config) {
-        try {
-            var trans = this._clearTransform();
-            this.saveImageData(this.getWidth(), this.getHeight());
-            this._setTransform(trans);
-
-            config.filter.call(this, config);
+    	var canvas = new Kinetic.Canvas(this.attrs.image.width, this.attrs.image.height);
+        var context = canvas.getContext();
+        context.drawImage(this.attrs.image, 0, 0);
+		try {
+			var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight());
+            config.filter(imageData, config);
             var that = this;
-            Kinetic.Type._getImage(this.getImageData(), function(imageObj) {
+            Kinetic.Type._getImage(imageData, function(imageObj) {
                 that.setImage(imageObj);
 
                 if(config.callback) {
@@ -119,12 +102,70 @@ Kinetic.Image = Kinetic.Shape.extend({
         catch(e) {
             Kinetic.Global.warn('Unable to apply filter.');
         }
+    },
+    /**
+     * create image buffer which enables more accurate hit detection mapping of the image
+     *  by avoiding event detections for transparent pixels
+     * @name createImageBuffer
+     * @methodOf Kinetic.Image.prototype
+     * @param {Function} [callback] callback function to be called once
+     *  the buffer image has been created and set
+     */
+    createImageBuffer: function(callback) {
+        var canvas = new Kinetic.Canvas(this.attrs.width, this.attrs.height);
+        var context = canvas.getContext();
+        context.drawImage(this.attrs.image, 0, 0);
+        try {
+            var imageData = context.getImageData(0, 0, canvas.getWidth(), canvas.getHeight());
+            var data = imageData.data;
+            var rgbColorKey = Kinetic.Type._hexToRgb(this.colorKey);
+            // replace non transparent pixels with color key
+            for(var i = 0, n = data.length; i < n; i += 4) {
+                data[i] = rgbColorKey.r;
+                data[i + 1] = rgbColorKey.g;
+                data[i + 2] = rgbColorKey.b;
+                // i+3 is alpha (the fourth element)
+            }
+
+            var that = this;
+            Kinetic.Type._getImage(imageData, function(imageObj) {
+                that.imageBuffer = imageObj;
+                if(callback) {
+                    callback();
+                }
+            });
+        }
+        catch(e) {
+            Kinetic.Global.warn('Unable to create image buffer.');
+        }
+    },
+    /**
+     * clear buffer image
+     * @name clearImageBuffer
+     * @methodOf Kinetic.Image.prototype
+     */
+    clearImageBuffer: function() {
+        delete this.imageBuffer;
+    },
+    _syncSize: function() {
+        if(this.attrs.image) {
+            if(!this.attrs.width) {
+                this.setAttrs({
+                    width: this.attrs.image.width
+                });
+            }
+            if(!this.attrs.height) {
+                this.setAttrs({
+                    height: this.attrs.image.height
+                });
+            }
+        }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'crop', 'filter']);
-Kinetic.Node.addSetters(Kinetic.Image, ['width', 'height']);
+Kinetic.Node.addGettersSetters(Kinetic.Image, ['image', 'crop', 'filter', 'width', 'height']);
 
 /**
  * set width
@@ -177,4 +218,16 @@ Kinetic.Node.addSetters(Kinetic.Image, ['width', 'height']);
  * get filter
  * @name getFilter
  * @methodOf Kinetic.Image.prototype
+ */
+
+/**
+ * get width
+ * @name getWidth
+ * @methodOf Kinetic.Image.prototype
+ */
+
+/**
+ * get height
+ * @name getHeight
+ * @methodOf Kinetic.Image.prototype
  */

src/shapes/Line.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Line = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Line = function(config) {
+    this._initLine(config);
+};
+
+Kinetic.Line.prototype = {
+    _initLine: function(config) {
         this.setDefaultAttrs({
             points: [],
             lineCap: 'butt',
@@ -19,7 +23,7 @@ Kinetic.Line = Kinetic.Shape.extend({
         this.shapeType = "Line";
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
     },
     drawFunc: function(context) {
         var lastPos = {};
@@ -94,7 +98,8 @@ Kinetic.Line = Kinetic.Shape.extend({
 
         context.moveTo(x2, y2);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Line, ['dashArray', 'lineCap', 'points']);

src/shapes/Path.js

@@ -8,15 +8,19 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Path = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Path = function(config) {
+    this._initPath(config);
+};
+
+Kinetic.Path.prototype = {
+    _initPath: function(config) {
         this.shapeType = "Path";
         this.dataArray = [];
         var that = this;
 
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
         this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
         this.on('dataChange', function() {
             that.dataArray = Kinetic.Path.parsePathData(that.attrs.data);
@@ -66,7 +70,8 @@ Kinetic.Path = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Path, Kinetic.Shape);
 
 /*
  * Utility methods written by jfollas to

src/shapes/Polygon.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Polygon = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Polygon = function(config) {
+    this._initPolygon(config);
+};
+
+Kinetic.Polygon.prototype = {
+    _initPolygon: function(config) {
         this.setDefaultAttrs({
             points: []
         });
@@ -16,7 +20,7 @@ Kinetic.Polygon = Kinetic.Shape.extend({
         this.shapeType = "Polygon";
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
     },
     drawFunc: function(context) {
         context.beginPath();
@@ -28,7 +32,8 @@ Kinetic.Polygon = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Polygon, ['points']);

src/shapes/Rect.js

@@ -7,8 +7,11 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Rect = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Rect = function(config) {
+    this._initRect(config);
+}
+Kinetic.Rect.prototype = {
+    _initRect: function(config) {
         this.setDefaultAttrs({
             width: 0,
             height: 0,
@@ -16,8 +19,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
         });
         this.shapeType = "Rect";
         config.drawFunc = this.drawFunc;
-        // call super constructor
-        this._super(config);
+
+        Kinetic.Shape.call(this, config);
     },
     drawFunc: function(context) {
         context.beginPath();
@@ -62,7 +65,8 @@ Kinetic.Rect = Kinetic.Shape.extend({
             height: this.attrs.height
         };
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']);

src/shapes/RegularPolygon.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.RegularPolygon = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.RegularPolygon = function(config) {
+    this._initRegularPolygon(config);
+};
+
+Kinetic.RegularPolygon.prototype = {
+    _initRegularPolygon: function(config) {
         this.setDefaultAttrs({
             radius: 0,
             sides: 0
@@ -17,7 +21,7 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
         this.shapeType = "RegularPolygon";
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
     },
     drawFunc: function(context) {
         context.beginPath();
@@ -32,7 +36,8 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.RegularPolygon, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.RegularPolygon, ['radius', 'sides']);

src/shapes/Sprite.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Sprite = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Sprite = function(config) {
+    this._initSprite(config);
+};
+
+Kinetic.Sprite.prototype = {
+    _initSprite: function(config) {
         this.setDefaultAttrs({
             index: 0,
             frameRate: 17
@@ -16,7 +20,7 @@ Kinetic.Sprite = Kinetic.Shape.extend({
 
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
         this.anim = new Kinetic.Animation();
         var that = this;
         this.on('animationChange.kinetic', function() {
@@ -25,10 +29,17 @@ Kinetic.Sprite = Kinetic.Shape.extend({
         });
     },
     drawFunc: function(context) {
+        var anim = this.attrs.animation;
+        var index = this.attrs.index;
+        var f = this.attrs.animations[anim][index];
+
+        context.beginPath();
+        context.rect(0, 0, f.width, f.height);
+        context.closePath();
+        this.fill(context);
+        this.stroke(context);
+
         if(this.attrs.image) {
-            var anim = this.attrs.animation;
-            var index = this.attrs.index;
-            var f = this.attrs.animations[anim][index];
 
             context.beginPath();
             context.rect(0, 0, f.width, f.height);
@@ -94,7 +105,8 @@ Kinetic.Sprite = Kinetic.Shape.extend({
             this.attrs.index = 0;
         }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Sprite, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);

src/shapes/Star.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Star = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Star = function(config) {
+    this._initStar(config);
+};
+
+Kinetic.Star.prototype = {
+    _initStar: function(config) {
         this.setDefaultAttrs({
             numPoints: 0,
             innerRadius: 0,
@@ -18,7 +22,7 @@ Kinetic.Star = Kinetic.Shape.extend({
         this.shapeType = "Star";
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
     },
     drawFunc: function(context) {
         context.beginPath();
@@ -35,7 +39,8 @@ Kinetic.Star = Kinetic.Shape.extend({
         this.fill(context);
         this.stroke(context);
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Star, Kinetic.Shape);
 
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);

src/shapes/Text.js

@@ -7,8 +7,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Text = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.Text = function(config) {
+    this._initText(config);
+};
+
+Kinetic.Text.prototype = {
+    _initText: function(config) {
         this.setDefaultAttrs({
             fontFamily: 'Calibri',
             text: '',
@@ -29,7 +33,7 @@ Kinetic.Text = Kinetic.Shape.extend({
 
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
 
         // update text data for certain attr changes
         var attrs = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'];
@@ -212,7 +216,9 @@ Kinetic.Text = Kinetic.Shape.extend({
         }
         this.textArr = arr;
     }
-});
+};
+Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
+
 // add getters setters
 Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
 

src/shapes/TextPath.js

@@ -8,8 +8,12 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.TextPath = Kinetic.Shape.extend({
-    init: function(config) {
+Kinetic.TextPath = function(config) {
+    this._initTextPath(config);
+};
+
+Kinetic.TextPath.prototype = {
+    _initTextPath: function(config) {
         this.setDefaultAttrs({
             fontFamily: 'Calibri',
             fontSize: 12,
@@ -25,7 +29,7 @@ Kinetic.TextPath = Kinetic.Shape.extend({
 
         config.drawFunc = this.drawFunc;
         // call super constructor
-        this._super(config);
+        Kinetic.Shape.call(this, config);
         this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
         this.on('dataChange', function() {
             that.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
@@ -279,7 +283,8 @@ Kinetic.TextPath = Kinetic.Shape.extend({
             p0 = p1;
         }
     }
-});
+};
+Kinetic.Global.extend(Kinetic.TextPath, Kinetic.Shape);
 
 // add setters and getters
 Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);

src/util/Canvas.js

@@ -92,22 +92,6 @@ Kinetic.Canvas.prototype = {
      */
     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() {
-        };
     },
     /**
      * toDataURL

src/util/Type.js

@@ -250,5 +250,22 @@ Kinetic.Type = {
         else {
             callback(null);
         }
+    },
+    _rgbToHex: function(r, g, b) {
+        return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    },
+    _hexToRgb: function(hex) {
+        var bigint = parseInt(hex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255
+        };
+    },
+    _getRandomColorKey: function() {
+        var r = Math.round(Math.random() * 255);
+        var g = Math.round(Math.random() * 255);
+        var b = Math.round(Math.random() * 255);
+        return this._rgbToHex(r, g, b);
     }
 };

tests/html/functionalTests.html

@@ -23,7 +23,7 @@
                 test.run();
 
                 document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
-                    console.log(evt.clientX + ',' + evt.clientY);
+                    //console.log(evt.clientX + ',' + evt.clientY);
                 }, false);
             };
 

tests/js/functionalTests.js

@@ -43,11 +43,12 @@ Test.prototype.tests = {
         /*
          * simulate drag and drop
          */
+        console.log(1)
         stage._mousedown({
             clientX: 380,
             clientY: 98
         });
-
+		console.log(2)
         test(!dragStart, 'dragstart event should not have been triggered');
         test(!dragMove, 'dragmove event should not have been triggered');
         test(!dragEnd, 'dragend event should not have been triggered');
@@ -261,7 +262,7 @@ Test.prototype.tests = {
         
         warn(layer.toDataURL() === urls[0], 'end data url is incorrect');
     },
-    'EVENTS - path detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
+    'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -296,37 +297,37 @@ Test.prototype.tests = {
 
         circle.on('mousedown', function() {
             mousedown = true;
-            //log('mousedown');
+            log('mousedown');
         });
 
         circle.on('mouseup', function() {
             mouseup = true;
-            //log('mouseup');
+            log('mouseup');
         });
 
         circle.on('mouseover', function() {
             mouseover = true;
-            //log('mouseover');
+            log('mouseover');
         });
 
         circle.on('mouseout', function() {
             mouseout = true;
-            //log('mouseout');
+            log('mouseout');
         });
 
         circle.on('mousemove', function() {
             mousemove = true;
-            //log('mousemove');
+            log('mousemove');
         });
 
         circle.on('click', function() {
             click = true;
-            //log('click');
+            log('click');
         });
 
         circle.on('dblclick', function() {
             dblclick = true;
-            //log('dblclick');
+            log('dblclick');
         });
         /*
          * mobile
@@ -366,286 +367,7 @@ Test.prototype.tests = {
         });
 
         test(mouseover, '1) mouseover should be true');
-        test(!mousemove, '1) mousemove should be false');
-        test(!mousedown, '1) mousedown should be false');
-        test(!mouseup, '1) mouseup should be false');
-        test(!click, '1) click should be false');
-        test(!dblclick, '1) dblclick should be false');
-        test(!mouseout, '1) mouseout should be false');
-
-        // move mouse again inside circle to trigger mousemove
-        stage._mousemove({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '2) mouseover should be true');
-        test(mousemove, '2) mousemove should be true');
-        test(!mousedown, '2) mousedown should be false');
-        test(!mouseup, '2) mouseup should be false');
-        test(!click, '2) click should be false');
-        test(!dblclick, '2) dblclick should be false');
-        test(!mouseout, '2) mouseout should be false');
-
-        // mousedown inside circle
-        stage._mousedown({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '3) mouseover should be true');
-        test(mousemove, '3) mousemove should be true');
-        test(mousedown, '3) mousedown should be true');
-        test(!mouseup, '3) mouseup should be false');
-        test(!click, '3) click should be false');
-        test(!dblclick, '3) dblclick should be false');
-        test(!mouseout, '3) mouseout should be false');
-
-        // mouseup inside circle
-        stage._mouseup({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '4) mouseover should be true');
-        test(mousemove, '4) mousemove should be true');
-        test(mousedown, '4) mousedown should be true');
-        test(mouseup, '4) mouseup should be true');
-        test(click, '4) click should be true');
-        test(!dblclick, '4) dblclick should be false');
-        test(!mouseout, '4) mouseout should be false');
-
-        // mousedown inside circle
-        stage._mousedown({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '5) mouseover should be true');
-        test(mousemove, '5) mousemove should be true');
-        test(mousedown, '5) mousedown should be true');
-        test(mouseup, '5) mouseup should be true');
-        test(click, '5) click should be true');
-        test(!dblclick, '5) dblclick should be false');
-        test(!mouseout, '5) mouseout should be false');
-
-        // mouseup inside circle to trigger double click
-        stage._mouseup({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '6) mouseover should be true');
-        test(mousemove, '6) mousemove should be true');
-        test(mousedown, '6) mousedown should be true');
-        test(mouseup, '6) mouseup should be true');
-        test(click, '6) click should be true');
-        test(dblclick, '6) dblclick should be true');
-        test(!mouseout, '6) mouseout should be false');
-
-        // move mouse outside of circle to trigger mouseout
-        stage._mousemove({
-            clientX: 0,
-            clientY: 100
-        });
-        stage._mousemove({
-            clientX: 0,
-            clientY: 100
-        });
-
-        test(mouseover, '7) mouseover should be true');
-        test(mousemove, '7) mousemove should be true');
-        test(mousedown, '7) mousedown should be true');
-        test(mouseup, '7) mouseup should be true');
-        test(click, '7) click should be true');
-        test(dblclick, '7) dblclick should be true');
-        test(mouseout, '7) mouseout should be true');
-
-        /*
-        * mobile tests
-        */
-        // reset inDoubleClickWindow
-        stage.inDoubleClickWindow = false;
-
-        // touchstart circle
-        stage._touchstart({
-            clientX: 289,
-            clientY: 100,
-            preventDefault: function() {
-            }
-        });
-
-        test(touchstart, '8) touchstart should be true');
-        test(!touchmove, '8) touchmove should be false');
-        test(!touchend, '8) touchend should be false');
-        test(!tap, '8) tap should be false');
-        test(!dbltap, '8) dbltap should be false');
-
-        // touchend circle
-        stage._touchend({
-            clientX: 289,
-            clientY: 100,
-            preventDefault: function() {
-            }
-        });
-
-        test(touchstart, '9) touchstart should be true');
-        test(!touchmove, '9) touchmove should be false');
-        test(touchend, '9) touchend should be true');
-        test(tap, '9) tap should be true');
-        test(!dbltap, '9) dbltap should be false');
-
-        // touchstart circle
-        stage._touchstart({
-            clientX: 289,
-            clientY: 100,
-            preventDefault: function() {
-            }
-        });
-
-        test(touchstart, '10) touchstart should be true');
-        test(!touchmove, '10) touchmove should be false');
-        test(touchend, '10) touchend should be true');
-        test(tap, '10) tap should be true');
-        test(!dbltap, '10) dbltap should be false');
-
-        // touchend circle to triger dbltap
-        stage._touchend({
-            clientX: 289,
-            clientY: 100,
-            preventDefault: function() {
-            }
-        });
-
-        test(touchstart, '11) touchstart should be true');
-        test(!touchmove, '11) touchmove should be false');
-        test(touchend, '11) touchend should be true');
-        test(tap, '11) tap should be true');
-        test(dbltap, '11) dbltap should be true');
-
-        // touchmove circle
-        stage._touchmove({
-            clientX: 290,
-            clientY: 100,
-            preventDefault: function() {
-            }
-        });
-
-        test(touchstart, '12) touchstart should be true');
-        test(touchmove, '12) touchmove should be true');
-        test(touchend, '12) touchend should be true');
-        test(tap, '12) tap should be true');
-        test(dbltap, '12) dbltap should be true');
-    },
-    'EVENTS - pixel detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200,
-            throttle: 999
-        });
-        var layer = new Kinetic.Layer();
-        var circle = new Kinetic.Ellipse({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'red',
-            stroke: 'black',
-            strokeWidth: 4,
-            detectionType: 'pixel'
-        });
-
-        // desktop events
-        var mousedown = false;
-        var mouseup = false;
-        var click = false;
-        var dblclick = false;
-        var mouseover = false;
-        var mouseout = false;
-        var mousemove = false;
-
-        // mobile events
-        var touchstart = false;
-        var touchend = false;
-        var tap = false;
-        var touchmove = false;
-        var dbltap = false;
-
-        circle.on('mousedown', function() {
-            mousedown = true;
-            //log('mousedown');
-        });
-
-        circle.on('mouseup', function() {
-            mouseup = true;
-            //log('mouseup');
-        });
-
-        circle.on('mouseover', function() {
-            mouseover = true;
-            //log('mouseover');
-        });
-
-        circle.on('mouseout', function() {
-            mouseout = true;
-            //log('mouseout');
-        });
-
-        circle.on('mousemove', function() {
-            mousemove = true;
-            //log('mousemove');
-        });
-
-        circle.on('click', function() {
-            click = true;
-            //log('click');
-        });
-
-        circle.on('dblclick', function() {
-            dblclick = true;
-            //log('dblclick');
-        });
-        /*
-         * mobile
-         */
-        circle.on('touchstart', function() {
-            touchstart = true;
-            //log('touchstart');
-        });
-
-        circle.on('touchend', function() {
-            touchend = true;
-            //log('touchend');
-        });
-
-        circle.on('touchmove', function() {
-            touchmove = true;
-            //log('touchmove');
-        });
-
-        circle.on('tap', function(evt) {
-            tap = true;
-            //log('tap');
-        });
-
-        circle.on('dbltap', function() {
-            dbltap = true;
-            //log('dbltap');
-        });
-
-        layer.add(circle);
-        stage.add(layer);
-
-        circle.saveImageData();
-
-        // move mouse to center of circle to trigger mouseover
-        stage._mousemove({
-            clientX: 290,
-            clientY: 100
-        });
-
-        test(mouseover, '1) mouseover should be true');
-        test(!mousemove, '1) mousemove should be false');
+        test(!mousemove, '1) mousemove should be true');
         test(!mousedown, '1) mousedown should be false');
         test(!mouseup, '1) mouseup should be false');
         test(!click, '1) click should be false');
@@ -935,30 +657,32 @@ Test.prototype.tests = {
 
         group.on('mouseover', function() {
             groupMouseovers++;
-            //onsole.log('over')
+            console.log('group over')
         });
 
         group.on('mouseout', function() {
             groupMouseouts++;
-            //console.log('out')
+            console.log('group out')
         });
 
         redEllipse.on('mouseover', function() {
             redMouseovers++;
-            //console.log('over')
+            console.log('red over')
         });
 
         redEllipse.on('mouseout', function() {
             redMouseouts++;
-            //console.log('out')
+            console.log('red out')
         });
 
         greenEllipse.on('mouseover', function() {
             greenMouseovers++;
+            console.log('green over')
         });
 
         greenEllipse.on('mouseout', function() {
             greenMouseouts++;
+            console.log('green out')
         });
 
         group.add(redEllipse);
@@ -1039,6 +763,11 @@ Test.prototype.tests = {
         test(greenMouseouts === 1, 'greenMouseouts should be 1');
         test(groupMouseovers === 1, 'groupMouseovers should be 1');
         test(groupMouseouts === 1, 'groupMouseouts should be 1');
+        
+        //document.body.appendChild(layer.bufferCanvas.element)
+        
+        layer.bufferCanvas.element.style.marginTop = '220px';
+    
     },
     'EVENTS - test event bubbling': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/manualTests.js

@@ -67,6 +67,8 @@ Test.prototype.tests = {
 
         layer.add(circle);
         stage.add(layer);
+        
+        document.body.appendChild(layer.bufferCanvas.element)
     },
     'TRANSITION - transition position and rotation': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -348,7 +350,6 @@ Test.prototype.tests = {
             fill: 'green',
             stroke: 'blue',
             strokeWidth: 20,
-            detectionType: 'pixel',
             draggable: true
         });
 
@@ -360,13 +361,10 @@ Test.prototype.tests = {
             log('mouseout');
         });
 
-        star.on('dragend', function() {
-            this.saveImageData();
-        });
-
         layer.add(star);
         stage.add(layer);
-        star.saveImageData();
+        
+        //document.body.appendChild(layer.bufferCanvas.element)
     },
     'EVENTS - drag events click': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -448,6 +446,11 @@ Test.prototype.tests = {
         layer.add(greenEllipse);
 
         stage.add(layer);
+        
+        //greenEllipse.hide();
+        layer.draw();
+        
+        //document.body.appendChild(layer.bufferCanvas.element);
     },
     'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -783,7 +786,7 @@ Test.prototype.tests = {
             })
         });
     },
-    '*DRAG AND DROP - two draggable shapes': function(containerId) {
+    'DRAG AND DROP - two draggable shapes': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -797,7 +800,6 @@ Test.prototype.tests = {
             fill: 'red',
             stroke: 'black',
             strokeWidth: 4,
-            //detectionType: 'pixel'
         });
 
         Ellipse.setDraggable(true);
@@ -810,7 +812,6 @@ Test.prototype.tests = {
             stroke: 'black',
             strokeWidth: 4,
             draggable: true
-            //detectionType: 'pixel'
         });
 
         /*

tests/js/performanceTests.js

@@ -1,5 +1,5 @@
 Test.prototype.tests = {
-    'DRAWING - draw rect': function(containerId) {
+    '*DRAWING - draw rect': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -67,7 +67,7 @@ Test.prototype.tests = {
             anim.start();
         }, 4000);
     },
-    '*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
+    'DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -90,8 +90,7 @@ Test.prototype.tests = {
 
                 var randX = Math.random() * stage.getWidth();
                 var randY = Math.random() * stage.getHeight();
-                //var randRadius = (Math.random() * 5) + 5
-
+                
                 var circle = new Kinetic.Ellipse({
                     x: randX,
                     y: randY,
@@ -101,6 +100,7 @@ Test.prototype.tests = {
 
                 circle.on("mousemove", function() {
                     // update tooltip
+                    console.log('mouseover')
                     var mousePos = stage.getMousePosition();
                     tooltip.setPosition(mousePos.x + 5, mousePos.y + 5);
                     tooltip.setText("node: " + i + ", color: " + color);
@@ -116,6 +116,7 @@ Test.prototype.tests = {
                 circlesLayer.add(circle);
             }());
         }
+      
         var tooltip = new Kinetic.Text({
             text: "",
             fontFamily: "Calibri",
@@ -128,9 +129,12 @@ Test.prototype.tests = {
         });
 
         tooltipLayer.add(tooltip);
+        
 
         stage.add(circlesLayer);
         stage.add(tooltipLayer);
+        
+        document.body.appendChild(circlesLayer.bufferCanvas.element)
 
     },
     'DRAWING - draw rect vs image from image data': function(containerId) {

tests/js/unitTests.js

@@ -1,7 +1,8 @@
 Test.prototype.tests = {
-    ////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////Fp
     //  STAGE tests
     ////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////////
 
     'STAGE - instantiate stage with id': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -94,40 +95,6 @@ Test.prototype.tests = {
         layer.add(group);
         layer.draw();
     },
-    'STAGE - test layer throttle': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var group = new Kinetic.Group();
-        var circle = new Kinetic.Ellipse({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: 70,
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 4,
-            name: 'myCircle'
-        });
-
-        group.add(circle);
-        layer.add(group);
-        stage.add(layer);
-
-        test(layer.lastDrawTime === 0, 'layer last draw time should be 0');
-
-        /*
-         * if throttling isn't working correctly, then the circle will
-         * flash green and then turn red
-         */
-        circle.setFill('red');
-        layer.draw();
-
-        test(layer.lastDrawTime > 0, 'layer last draw time should be greather than 0');
-
-    },
     'STAGE - add shape with linear gradient fill': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -162,8 +129,10 @@ Test.prototype.tests = {
         stage.add(layer);
 
         test(circle.getName() === 'myCircle', 'circle name should be myCircle');
+
+        document.body.appendChild(layer.bufferCanvas.element)
     },
-    'STAGE - add shape with alpha': function(containerId) {
+    'STAGE - add shape with opacity': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -184,10 +153,10 @@ Test.prototype.tests = {
         layer.add(group);
         stage.add(layer);
 
-        circle.setAlpha(0.5);
+        circle.setOpacity(0.5);
         layer.draw();
 
-        circle.setAlpha(0.5);
+        circle.setOpacity(0.5);
         layer.draw();
     },
     'STAGE - add layer then group then shape': function(containerId) {
@@ -237,7 +206,7 @@ Test.prototype.tests = {
         group.add(circle);
         layer.draw();
 
-        var expectedJson = '{"attrs":{"width":578,"height":200,"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,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"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,"dragThrottle":80},"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,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
+        var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
 
         //console.log(stage.toJSON())
         //test(stage.toJSON() === expectedJson, 'problem with serialization');
@@ -324,10 +293,10 @@ Test.prototype.tests = {
             height: 200
         });
 
-        var json = '{"attrs":{"width":578,"height":200,"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,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"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,"dragThrottle":80},"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,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
-        stage.load(json);
+        var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"radius":{"x":70,"y":70},"detectionType":"path","visible":true,"listening":true,"name":"myCircle","opacity":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"dragThrottle":80,"fill":"green","stroke":"black","strokeWidth":4},"nodeType":"Shape","shapeType":"Ellipse"}]}]}]}';
+        //stage.load(json);
 
-        test(stage.toJSON() === json, "problem loading stage with json");
+        //test(stage.toJSON() === json, "problem loading stage with json");
     },
     'STAGE - serialize stage with custom shape': function(containerId) {
         var urls = dataUrls['STAGE - serialize stage with custom shape'];
@@ -367,7 +336,7 @@ Test.prototype.tests = {
         test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
 
         //console.log(stage.toJSON())
-        var expectedJson = '{"attrs":{"width":578,"height":200,"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,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"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,"dragThrottle":80},"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,"dragThrottle":80},"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,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
+        var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
 
         //console.log(stage.toJSON())
         //test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
@@ -398,16 +367,16 @@ Test.prototype.tests = {
             this.fill(context);
             this.stroke(context);
         };
-        var json = '{"attrs":{"width":578,"height":200,"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,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"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,"dragThrottle":80},"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,"dragThrottle":80},"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,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
-        stage.load(json);
+        var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Group","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
+        //stage.load(json);
 
-        var customShape = stage.get('#myTriangle')[0];
+        //var customShape = stage.get('#myTriangle')[0];
 
-        customShape.setDrawFunc(drawTriangle);
+        //customShape.setDrawFunc(drawTriangle);
 
-        stage.draw();
+        //stage.draw();
         //console.log(stage.toJSON());
-        test(stage.toJSON() === json, "problem loading stage with custom shape json");
+        //test(stage.toJSON() === json, "problem loading stage with custom shape json");
     },
     'EVENTS - test getIntersections': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -511,7 +480,6 @@ Test.prototype.tests = {
 
         test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
         test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');
-
         stage.draw();
     },
     'STAGE - scale stage before add shape': function(containerId) {
@@ -691,7 +659,7 @@ Test.prototype.tests = {
         test(stage.names['newRectName'][0].getName() === 'newRectName', 'new rect name not in names hash');
         test(stage.names['myRect'] === undefined, 'old rect name is still in names hash');
     },
-    'STAGE - set shape and layer alpha to 0.5': function(containerId) {
+    'STAGE - set shape and layer opacity to 0.5': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -707,13 +675,13 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        circle.setAlpha(0.5);
-        layer.setAlpha(0.5);
+        circle.setOpacity(0.5);
+        layer.setOpacity(0.5);
         layer.add(circle);
         stage.add(layer);
 
-        test(circle.getAbsoluteAlpha() === 0.25, 'abs alpha should be 0.25');
-        test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
+        test(circle.getAbsoluteOpacity() === 0.25, 'abs opacity should be 0.25');
+        test(layer.getAbsoluteOpacity() === 0.5, 'abs opacity should be 0.5');
     },
     'STAGE - remove shape without adding its parent to stage': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -894,7 +862,7 @@ Test.prototype.tests = {
 
             layer.add(darth);
             stage.add(layer);
-            var expectedJson = '{"attrs":{"width":578,"height":200,"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,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"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,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
+            var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80},"nodeType":"Layer","children":[{"attrs":{"detectionType":"path","visible":true,"listening":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"dragThrottle":80,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
             //console.log(stage.toJSON())
             //test(stage.toJSON() === expectedJson, 'problem with serializing stage with image');
         };
@@ -909,11 +877,11 @@ Test.prototype.tests = {
                 height: 200
             });
 
-            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":{"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":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
-            stage.load(json);
-            var image = stage.get('#darth')[0];
-            image.setImage(imageObj);
-            stage.draw();
+            var json = '{"attrs":{"width":578,"height":200,"visible":true,"listen":true,"opacity":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":{"visible":true,"listen":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","visible":true,"listen":true,"opacity":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}';
+            //stage.load(json);
+            //var image = stage.get('#darth')[0];
+            //image.setImage(imageObj);
+            //stage.draw();
         };
         imageObj.src = '../assets/darth-vader.jpg';
     },
@@ -1301,6 +1269,8 @@ Test.prototype.tests = {
             circle.setFill({
                 offset: [-200, -70]
             });
+
+            //document.body.appendChild(layer.bufferCanvas.element)
         };
         imageObj.src = '../assets/darth-vader.jpg';
 
@@ -1354,6 +1324,8 @@ Test.prototype.tests = {
 
         test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
 
+        //document.body.appendChild(layer.bufferCanvas.element)
+
     },
     'SHAPE - add rect': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -1470,10 +1442,10 @@ Test.prototype.tests = {
         });
 
         /*
-         * serialize the stage.  The json should succeed because objects that have
-         * methods, such as self, are not serialized, and will therefore avoid
-         * circular json errors.
-         */
+        * serialize the stage.  The json should succeed because objects that have
+        * methods, such as self, are not serialized, and will therefore avoid
+        * circular json errors.
+        */
         //var json = stage.toJSON();
     },
     'SHAPE - set fill after instantiation': function(containerId) {
@@ -1516,7 +1488,7 @@ Test.prototype.tests = {
                 height: 100,
                 offset: [50, 30],
                 crop: [135, 7, 167, 134],
-                cornerRadius: 20
+                draggable: true
             });
 
             layer.add(darth);
@@ -1543,9 +1515,6 @@ Test.prototype.tests = {
             test(crop.width === 167, 'crop width should be 167');
             test(crop.height === 134, 'crop height should be134');
 
-            /*
-             * test cropping setter
-             */
             darth.setCrop(0, 1, 2, 3);
             crop = darth.getCrop();
             test(crop.x === 0, 'crop x should be 0');
@@ -1572,9 +1541,6 @@ Test.prototype.tests = {
             test(crop.width === 10, 'crop width should be 10');
             test(crop.height === 11, 'crop height should be 11');
 
-            /*
-             * test crop partial setter
-             */
             darth.setCrop({
                 x: 12
             });
@@ -1611,6 +1577,19 @@ Test.prototype.tests = {
             test(crop.width === 14, 'crop width should be 14');
             test(crop.height === 15, 'crop height should be 15');
 
+            darth.setAttrs({
+                x: 200,
+                y: 60,
+                image: imageObj,
+                width: 100,
+                height: 100,
+                offset: [50, 30],
+                crop: [135, 7, 167, 134],
+                draggable: true
+            });
+
+            //document.body.appendChild(layer.bufferCanvas.element)
+
         };
         imageObj.src = '../assets/darth-vader.jpg';
     },
@@ -1630,8 +1609,7 @@ Test.prototype.tests = {
                 x: 10,
                 y: 10,
                 image: imageObj,
-                draggable: true,
-                stroke: 'red'
+                draggable: true
             });
 
             layer.add(darth);
@@ -1669,8 +1647,6 @@ Test.prototype.tests = {
                 //height: 300,
                 image: imageObj,
                 draggable: true,
-                stroke: 'red',
-                strokeWidth: 5,
                 rotationDeg: 10,
                 scale: 0.3
             });
@@ -1823,7 +1799,7 @@ Test.prototype.tests = {
                     color: 'black',
                     blur: 3,
                     offset: [3, 1],
-                    alpha: 0.3
+                    opacity: 0.3
                 }
             });
 
@@ -1844,6 +1820,7 @@ Test.prototype.tests = {
             setTimeout(function() {
                 sprite.stop();
             }, 3000);
+            //document.body.appendChild(layer.bufferCanvas.element)
         };
         imageObj.src = '../assets/scorpion-sprite.png';
     },
@@ -1902,12 +1879,19 @@ Test.prototype.tests = {
                     strokeWidth: 5,
                     x: 50,
                     y: -120
+
                 });
-
+                
                 layer.add(cachedShape);
-                layer.draw();
 
-                warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
+                cachedShape.createImageBuffer(function() {
+                    
+                    layer.draw();
+
+                    warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
+                    
+                    document.body.appendChild(layer.bufferCanvas.element)
+                });
             }
         });
 
@@ -1926,6 +1910,8 @@ Test.prototype.tests = {
                 test(Kinetic.Type._isElement(imageObj), 'stage toImage() should be an image object');
             }
         });
+
+        //document.body.appendChild(layer.bufferCanvas.element)
     },
     'SHAPE - add polygon': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -1996,18 +1982,9 @@ Test.prototype.tests = {
             draggable: true
         });
 
-        // test that default detection type is pixel
-        test(line.getDetectionType() === 'pixel', 'dection type should be pixel');
-
         layer.add(line);
         stage.add(layer);
 
-        line.saveImageData();
-
-        line.on('dragend', function() {
-            line.saveImageData();
-        });
-
         line.setPoints([1, 2, 3, 4]);
         test(line.getPoints()[0].x === 1, 'first point x should be 1');
 
@@ -2226,7 +2203,7 @@ Test.prototype.tests = {
                 color: 'black',
                 blur: 10,
                 offset: [20, 20],
-                alpha: 0.5
+                opacity: 0.5
             },
             draggable: true
         });
@@ -2378,7 +2355,7 @@ Test.prototype.tests = {
                 height: 200
             });
             var layer = new Kinetic.Layer();
-            var darth = new Kinetic.Image({
+            var lion = new Kinetic.Image({
                 x: 200,
                 y: 40,
                 image: imageObj,
@@ -2387,12 +2364,15 @@ Test.prototype.tests = {
                     color: 'black',
                     blur: 10,
                     offset: [20, 20],
-                    alpha: 0.2
+                    opacity: 0.2
                 }
             });
 
-            layer.add(darth);
-            stage.add(layer);
+            layer.add(lion);
+            lion.createImageBuffer(function() {
+                stage.add(layer);
+            });
+            //document.body.appendChild(layer.bufferCanvas.element);
 
         };
         imageObj.src = '../assets/lion.png';
@@ -2523,52 +2503,6 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
     },
-    'NODE - test pixel detection setter and getter': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-
-        var layer = new Kinetic.Layer({
-            rotationDeg: 20
-        });
-        var star = new Kinetic.Star({
-            x: 200,
-            y: 100,
-            numPoints: 10,
-            innerRadius: 40,
-            outerRadius: 70,
-            fill: 'green',
-            stroke: 'blue',
-            strokeWidth: 20,
-            detectionType: 'pixel',
-            draggable: true
-        });
-
-        star.on('mouseover', function() {
-            log('mouseover');
-        });
-
-        star.on('mouseout', function() {
-            log('mouseout');
-        });
-
-        star.on('dragend', function() {
-            this.saveImageData();
-        });
-
-        layer.add(star);
-        stage.add(layer);
-
-        star.saveImageData();
-
-        test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
-        star.setDetectionType('path');
-        test(star.getDetectionType() === 'path', 'detection type should be path');
-        star.setDetectionType('pixel');
-        test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
-    },
     'SHAPE - test intersects()': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
@@ -2592,27 +2526,28 @@ Test.prototype.tests = {
         test(rect.intersects({
             x: 200,
             y: 100
-        }) === true, 'problem with point in shape');
+        }) === true, '(200,100) should intersect the shape');
 
         test(rect.intersects({
-            x: 199,
-            y: 99
-        }) === false, 'intersects with point in shape');
+            x: 197,
+            y: 97
+        }) === false, '(197, 97) should not intersect the shape');
 
         test(rect.intersects({
             x: 250,
             y: 125
-        }) === true, 'intersects with point in shape');
+        }) === true, '(250, 125) should intersect the shape');
 
         test(rect.intersects({
             x: 300,
             y: 150
-        }) === true, 'intersects with point in shape');
+        }) === true, '(300, 150) should intersect the shape');
 
         test(rect.intersects({
-            x: 301,
-            y: 151
-        }) === false, 'intersects with point in shape');
+            x: 303,
+            y: 153
+        }) === false, '(303, 153) should not intersect the shape');
+
     },
     'CONTAINER - node type selector': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -2694,11 +2629,10 @@ Test.prototype.tests = {
                 color: 'black',
                 blur: 1,
                 offset: [10, 10],
-                alpha: 0.2
+                opacity: 0.2
             },
             cornerRadius: 10,
-            draggable: true,
-            detectionType: 'path'
+            draggable: true
         });
 
         // center text box
@@ -2730,7 +2664,6 @@ Test.prototype.tests = {
         test(text.getShadow().color === 'black', 'text box shadow color should be black');
         test(text.getCornerRadius() === 10, 'text box corner radius should be 10');
         test(text.getDraggable() === true, 'text should be draggable');
-        test(text.getDetectionType() === 'path', 'text detection type should be path');
 
         test(text.getBoxWidth() === 400, 'box width should be 400');
         test(text.getBoxHeight() === 100, 'box height should be 100');
@@ -2757,7 +2690,6 @@ Test.prototype.tests = {
         });
         text.setCornerRadius(20);
         text.setDraggable(false);
-        text.setDetectionType('pixel');
 
         test(text.getX() === 1, 'text box x should be 1');
         test(text.getY() === 2, 'text box y should be 2');
@@ -2777,8 +2709,11 @@ Test.prototype.tests = {
         test(text.getShadow().color === 'green', 'text box shadow color should be green');
         test(text.getCornerRadius() === 20, 'text box corner radius should be 20');
         test(text.getDraggable() === false, 'text draggable should be false');
-        test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
 
+        //document.body.appendChild(layer.bufferCanvas.element)
+
+        //layer.setListening(false);
+        layer.drawBuffer();
     },
     'SHAPE - text multi line': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -2809,7 +2744,7 @@ Test.prototype.tests = {
                 color: 'black',
                 blur: 1,
                 offset: [10, 10],
-                alpha: 0.2
+                opacity: 0.2
             },
             cornerRadius: 10,
             draggable: true,
@@ -4083,7 +4018,7 @@ Test.prototype.tests = {
 
         test(circle.isVisible() === true, 'circle should be visible');
     },
-    'SHAPE - set shape alpha to 0.5': function(containerId) {
+    'SHAPE - set shape opacity to 0.5': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -4099,11 +4034,11 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        circle.setAlpha(0.5);
+        circle.setOpacity(0.5);
         layer.add(circle);
         stage.add(layer);
     },
-    'SHAPE - set shape alpha to 0.5 then back to 1': function(containerId) {
+    'SHAPE - set shape opacity to 0.5 then back to 1': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -4119,16 +4054,16 @@ Test.prototype.tests = {
             strokeWidth: 4
         });
 
-        circle.setAlpha(0.5);
+        circle.setOpacity(0.5);
         layer.add(circle);
         stage.add(layer);
 
-        test(circle.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
+        test(circle.getAbsoluteOpacity() === 0.5, 'abs opacity should be 0.5');
 
-        circle.setAlpha(1);
+        circle.setOpacity(1);
         layer.draw();
 
-        test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1');
+        test(circle.getAbsoluteOpacity() === 1, 'abs opacity should be 1');
     },
     ////////////////////////////////////////////////////////////////////////
     //  LAYERING tests
@@ -4713,7 +4648,7 @@ Test.prototype.tests = {
                 color: 'black',
                 blur: 2,
                 offset: [10, 10],
-                alpha: 0.5
+                opacity: 0.5
             },
             draggable: true
         });
@@ -4763,7 +4698,7 @@ Test.prototype.tests = {
                 color: 'maroon',
                 blur: 2,
                 offset: [10, 10],
-                alpha: 0.5
+                opacity: 0.5
             },
             draggable: true
         });
@@ -4814,18 +4749,20 @@ Test.prototype.tests = {
 
             path.on('mouseover', function() {
                 this.setFill('red');
-                mapLayer.draw();
+                mapLayer.drawScene();
             });
 
             path.on('mouseout', function() {
                 this.setFill('#ccc');
-                mapLayer.draw();
+                mapLayer.drawScene();
             });
 
             mapLayer.add(path);
         }
 
         stage.add(mapLayer);
+
+        //document.body.appendChild(mapLayer.bufferCanvas.element);
     },
     'PATH - curved arrow path': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -5059,6 +4996,8 @@ Test.prototype.tests = {
         layer.add(group);
         stage.add(layer);
 
+        //document.body.appendChild(layer.bufferCanvas.element)
+
     },
     'PATHHELPER - Able to determine point on line some distance from another point on line': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -5525,35 +5464,51 @@ Test.prototype.tests = {
         layer.add(borneo);
         stage.add(layer);
     },
-	'JPEG toDataURL() Not Hiding Lower Layers with Black': function(containerId) {
-           var stage = new Kinetic.Stage({
-                container: containerId,
-                width: 578,
-                height: 200
-           });
-		   
-		   var layer1 = new Kinetic.Layer();
-		   var layer2 = new Kinetic.Layer();
-		   
-		   layer1.add(new Kinetic.Rect({x:10, y:10, width: 25, height: 15, fill: 'red'}));
-		   layer2.add(new Kinetic.Rect({x:50, y:50, width: 15, height: 25, fill: 'green'}));
-		   
-		   stage.add(layer1);
-		   stage.add(layer2);
-		   
-		   stage.toDataURL({
-				height: 100, 
-				width: 100, 
-				mimeType: 'image/jpeg', 
-				quality: 0.8, 
-				callback: function(url) {
-					var imageObj = new Image();
-					imageObj.onload = function() {
-						layer2.add(new Kinetic.Image({x: 200, y: 10, image: imageObj}));
-						layer2.draw();
-					};
-					imageObj.src = url;
-				}
-		   })
-	}
+    'JPEG toDataURL() Not Hiding Lower Layers with Black': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var layer1 = new Kinetic.Layer();
+        var layer2 = new Kinetic.Layer();
+
+        layer1.add(new Kinetic.Rect({
+            x: 10,
+            y: 10,
+            width: 25,
+            height: 15,
+            fill: 'red'
+        }));
+        layer2.add(new Kinetic.Rect({
+            x: 50,
+            y: 50,
+            width: 15,
+            height: 25,
+            fill: 'green'
+        }));
+
+        stage.add(layer1);
+        stage.add(layer2);
+
+        stage.toDataURL({
+            height: 100,
+            width: 100,
+            mimeType: 'image/jpeg',
+            quality: 0.8,
+            callback: function(url) {
+                var imageObj = new Image();
+                imageObj.onload = function() {
+                    layer2.add(new Kinetic.Image({
+                        x: 200,
+                        y: 10,
+                        image: imageObj
+                    }));
+                    layer2.draw();
+                };
+                imageObj.src = url;
+            }
+        })
+    }
 };