greatly improved the OO design for draw logic. removed unecessary _draw() and __draw() methods

src/Container.js

@@ -103,13 +103,14 @@ Kinetic.Container.prototype = {
         var collection = new Kinetic.Collection();
         // ID selector
         if(selector.charAt(0) === '#') {
-        	var node = this._getNodeById(selector.slice(1));
-        	if (node) collection.push(node);
+            var node = this._getNodeById(selector.slice(1));
+            if(node)
+                collection.push(node);
         }
         // name selector
         else if(selector.charAt(0) === '.') {
-        	var nodeList = this._getNodesByName(selector.slice(1));
-        	Kinetic.Collection.apply(collection, nodeList);
+            var nodeList = this._getNodesByName(selector.slice(1));
+            Kinetic.Collection.apply(collection, nodeList);
         }
         // unrecognized selector, pass to children
         else {
@@ -131,7 +132,7 @@ Kinetic.Container.prototype = {
     },
     _getNodesByName: function(key) {
         var arr = this.getStage().names[key] || [];
-		return this._getDescendants(arr);
+        return this._getDescendants(arr);
     },
     _get: function(selector) {
         var retArr = Kinetic.Node.prototype._get.call(this, selector);
@@ -156,7 +157,7 @@ Kinetic.Container.prototype = {
         return obj;
     },
     _getDescendants: function(arr) {
-    	var retArr = [];
+        var retArr = [];
         for(var n = 0; n < arr.length; n++) {
             var node = arr[n];
             if(this.isAncestorOf(node)) {
@@ -227,6 +228,15 @@ Kinetic.Container.prototype = {
         for(var n = 0; n < this.children.length; n++) {
             this.children[n].index = n;
         }
+    },
+    draw: function(canvas) {
+        if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+            var children = this.children;
+            var length = children.length;
+            for(var n = 0; n < length; n++) {
+                children[n].draw(canvas);
+            }
+        }
     }
 };
 Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);

src/Layer.js

@@ -60,12 +60,24 @@ Kinetic.Layer.prototype = {
             this.beforeDrawFunc.call(this);
         }
 
+        var canvases = [];
         if(canvas) {
-            this._draw(canvas);
+            canvases.push(canvas);
         }
         else {
-            this._draw(this.getCanvas());
-            this._draw(this.bufferCanvas);
+            canvases.push(this.getCanvas());
+            canvases.push(this.bufferCanvas);
+        }
+
+        var length = canvases.length;
+        for(var n = 0; n < length; n++) {
+            var canvas = canvases[n];
+            if(Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
+                if(this.attrs.clearBeforeDraw) {
+                    canvas.clear();
+                }
+                Kinetic.Container.prototype.draw.call(this, canvas);
+            }
         }
 
         // after draw  handler
@@ -210,7 +222,7 @@ Kinetic.Layer.prototype = {
      *  specified, then "image/png" will result. For "image/jpeg", specify a quality
      *  level as quality (range 0.0 - 1.0).  Note that this method works
      *  differently from toDataURL() for other nodes because it generates an absolute dataURL
-     *  based on what's draw on the layer, rather than drawing
+     *  based on what's currently drawn on the layer, rather than drawing
      *  the current state of each child node
      * @name toDataURL
      * @methodOf Kinetic.Layer.prototype
@@ -250,11 +262,6 @@ Kinetic.Layer.prototype = {
         } catch(e) {
             Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
         }
-    },
-    __draw: function(canvas) {
-        if(this.attrs.clearBeforeDraw) {
-            canvas.clear();
-        }
     }
 };
 Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);

src/Node.js

@@ -519,7 +519,7 @@ Kinetic.Node.prototype = {
      */
     getAbsoluteOpacity: function() {
         var absOpacity = this.getOpacity();
-        if (this.getParent()) {
+        if(this.getParent()) {
             absOpacity *= this.getParent().getAbsoluteOpacity();
         }
         return absOpacity;
@@ -766,16 +766,17 @@ Kinetic.Node.prototype = {
         var mimeType = config && config.mimeType ? config.mimeType : null;
         var quality = config && config.quality ? config.quality : null;
         var canvas;
+
+        //if width and height are defined, create new canvas to draw on, else reuse stage buffer canvas
         if(config && config.width && config.height) {
             canvas = new Kinetic.Canvas(config.width, config.height);
         }
         else {
             canvas = this.getStage().bufferCanvas;
+            canvas.clear();
         }
 
-        var context = canvas.getContext();
-        canvas.clear();
-        this._draw(canvas);
+        this.draw(canvas);
         return canvas.toDataURL(mimeType, quality);
     },
     /**
@@ -1002,25 +1003,8 @@ Kinetic.Node.prototype = {
             }
         }
     },
-    _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);
-                    }
-                }
-            }
-        }
+    _shouldDraw: function(canvas) {
+        return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
     }
 };
 
@@ -1086,12 +1070,12 @@ Kinetic.Node._createNode = function(obj, container) {
     else {
         type = obj.nodeType;
     }
-    
+
     // if container was passed in, add it to attrs
-    if (container) {
-    	obj.attrs.container = container;
+    if(container) {
+        obj.attrs.container = container;
     }
-    
+
     var no = new Kinetic[type](obj.attrs);
     if(obj.children) {
         for(var n = 0; n < obj.children.length; n++) {
@@ -1267,4 +1251,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * determine if listening to events or not
  * @name getListening
  * @methodOf Kinetic.Node.prototype
- */
+ */

src/Shape.js

@@ -438,7 +438,7 @@ Kinetic.Shape.prototype = {
         var stage = this.getStage();
         var bufferCanvas = stage.bufferCanvas;
         bufferCanvas.clear();
-        this._draw(bufferCanvas);
+        this.draw(bufferCanvas);
         var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
         return p[3] > 0;
     },
@@ -446,8 +446,8 @@ Kinetic.Shape.prototype = {
         Kinetic.Node.prototype.remove.call(this);
         delete Kinetic.Global.shapes[this.colorKey];
     },
-    __draw: function(canvas) {
-        if(this.attrs.drawFunc) {
+    draw: function(canvas) {
+        if(this.attrs.drawFunc && Kinetic.Node.prototype._shouldDraw.call(this, canvas)) {
             var stage = this.getStage();
             var context = canvas.getContext();
             var family = [];

src/Stage.js

@@ -63,13 +63,11 @@ Kinetic.Stage.prototype = {
         this.setAttr('container', container);
     },
     /**
-     * draw children
+     * draw layers
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function() {
-        this._draw();
-    },
+
     /**
      * set stage size
      * @name setSize