added batchDraw which enables you to call batchDraw() as many times as you want, and let Kinetic automatically combine layer draws together asynchronously

src/Animation.js

@@ -50,6 +50,33 @@
         getLayers: function() {
             return this.layers;
         },
+        /**
+         * add layer.  Returns true if the layer was added, and false if it was not
+         * @name addLayer
+         * @methodOf Kinetic.Animation.prototype
+         * @param {Kinetic.Layer} layer
+         */
+        addLayer: function(layer) {
+            var layers = this.layers,
+                len, n;
+
+            if (layers) {
+                len = layers.length;
+
+                // don't add the layer if it already exists
+                for (n = 0; n < len; n++) {
+                    if (layers[n]._id === layer._id) {
+                        return false; 
+                    } 
+                } 
+            }
+            else {
+                this.layers = [];
+            }
+
+            this.layers.push(layer);
+            return true;
+        },
         /**
          * determine if animation is running or not.  returns true or false
          * @name isRunning
@@ -143,7 +170,7 @@
                     }
                     // if animation object has a function, execute it
                     if(func) {
-                        func(anim.frame);
+                        func.call(anim, anim.frame);
                     }
                 }
             }

src/Layer.js

@@ -14,6 +14,13 @@
         this._initLayer(config);
     };
 
+    Kinetic.Layer.batchAnim = new Kinetic.Animation(function() {
+        if (this.getLayers().length === 0) {
+            this.stop();
+        }
+        this.setLayers([]);
+    });
+
     Kinetic.Layer.prototype = {
         _initLayer: function(config) {
             this.nodeType = 'Layer';
@@ -28,8 +35,7 @@
         /**
          * get intersection object that contains shape and pixel data
          * @name getIntersection
-         * @methodOf Kinetic.Stage.prototype
-         * @param {Object} pos point object
+         * @methodOf Kinetic.Layer.prototype
          */
         getIntersection: function() {
             var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),
@@ -56,6 +62,19 @@
 
             return null;
         },
+        /**
+         * get batch draw
+         * @name batchDraw
+         * @methodOf Kinetic.Layer.prototype
+         */
+        batchDraw: function() {
+            var batchAnim = Kinetic.Layer.batchAnim;
+            batchAnim.addLayer(this);  
+
+            if (!batchAnim.isRunning()) {
+                batchAnim.start(); 
+            } 
+        },
         drawScene: function(canvas) {
             var canvas = canvas || this.getCanvas();
 

tests/js/unit/animationTests.js

@@ -4,7 +4,7 @@ Test.Modules.ANIMATION = {
      * animation because it's accessing the global animation object which could
      * be modified by other unit tests
      */
-    'ANIMATION - test start and stop': function(containerId) {
+    'test start and stop': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -53,5 +53,49 @@ Test.Modules.ANIMATION = {
 
         anim.stop();
         test(a.animations.length === 0, 'should be no animations running');
+    },
+    'batch draw': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        draws = 0;
+
+        layer.on('draw', function() {
+            console.log('draw')
+            draws++;
+        });
+
+        layer.draw();
+        layer.draw();
+        layer.draw();
+
+        test(draws === 3, 'draw count should be 3');
+
+        layer.batchDraw();
+        layer.batchDraw();
+        layer.batchDraw();
+
+        test(Kinetic.Layer.batchAnim.getLayers().length === 1, 'batch animation should only have one layer');
+
+        // since batch draw is async, we need to test the draw count with a timeout
+        setTimeout(function() {
+            test(draws === 4, 'draw count should be 4');
+        }, 200); 
     }
 };