deprecated the clipFunc method. replaced it with clip, which has an x, y, width, and height

src/Canvas.js

@@ -222,11 +222,16 @@
             this.context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
         },
         _clip: function(container) {
-            var context = this.getContext();
+            var context = this.getContext(),
+                clipX = container.getClipX() || 0,
+                clipY = container.getClipY() || 0,
+                clipWidth = container.getClipWidth(),
+                clipHeight = container.getClipHeight();
+
             context.save();
             this._applyAncestorTransforms(container);
             context.beginPath();
-            container.getClipFunc()(this);
+            context.rect(clipX, clipY, clipWidth, clipHeight);
             context.clip();
             context.setTransform(1, 0, 0, 1, 0, 0);
         }

src/Container.js

@@ -242,7 +242,7 @@
         },
         drawScene: function(canvas) {
             var layer = this.getLayer(),
-                clip = !!this.getClipFunc(),
+                clip = this.getClipWidth() && this.getClipHeight(),
                 children, n, len;
 
             if (!canvas && layer) {
@@ -269,7 +269,7 @@
             return this;
         },
         drawHit: function() {
-            var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
+            var clip = this.getClipWidth() && this.getClipHeight() && this.nodeType !== 'Stage',
                 n = 0,
                 len = 0,
                 children = [],
@@ -299,20 +299,93 @@
     Kinetic.Util.extend(Kinetic.Container, Kinetic.Node);
 
     // add getters setters
-    Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipFunc');
+    Kinetic.Factory.addBoxGetterSetter(Kinetic.Container, 'clip');
 
     /**
-     * set clipping function
-     * @name setClipFunc
+     * set clip
+     * @method
+     * @name setClip
+     * @memberof Kinetic.Container.prototype
+     * @param {Object|Array}
+     * @example
+     * // set clip x, y, width and height with an array<br>
+     * image.setClip([20, 20, 100, 100]);<br><br>
+     *
+     * // set clip x, y, width and height with an object<br>
+     * image.setClip({<br>
+     *   x: 20,<br>
+     *   y: 20,<br>
+     *   width: 20,<br>
+     *   height: 20<br>
+     * });
+     */
+
+     /**
+     * set clipX
+     * @method
+     * @name setClipX
+     * @memberof Kinetic.Container.prototype
+     * @param {Number} x
+     */
+
+     /**
+     * set clipY
+     * @name setClipY
      * @method
      * @memberof Kinetic.Container.prototype
-     * @param {Number} deg
+     * @param {Number} y
+     */
+
+     /**
+     * set clipWidth
+     * @name setClipWidth
+     * @method
+     * @memberof Kinetic.Container.prototype
+     * @param {Number} width
+     */
+
+     /**
+     * set clipHeight
+     * @name setClipHeight
+     * @method
+     * @memberof Kinetic.Container.prototype
+     * @param {Number} height
      */
 
     /**
-     * get clipping function
-     * @name getClipFunc
+     * get clip
+     * @name getClip
+     * @method
+     * @memberof Kinetic.Container.prototype
+     * @return {Object}
+     */
+
+    /**
+     * get clip x
+     * @name getClipX
      * @method
      * @memberof Kinetic.Container.prototype
      */
+
+    /**
+     * get clip y
+     * @name getClipY
+     * @method
+     * @memberof Kinetic.Container.prototype
+     */
+
+    /**
+     * get clip width
+     * @name getClipWidth
+     * @method
+     * @memberof Kinetic.Container.prototype
+     */
+
+    /**
+     * get clip height
+     * @name getClipHeight
+     * @method
+     * @memberof Kinetic.Container.prototype
+     */
+
 })();

tests/js/manualTests.js

@@ -47,6 +47,54 @@ Test.Modules.Tween = {
           tween.reverse();
         });
 
+    },
+    '*tween clipping region': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer({
+            clipX: 0,
+            clipY: 0,
+            clipWidth: 150,
+            clipHeight: 100
+        });
+
+        var spline = new Kinetic.Spline({
+            points: [
+                73, 160,
+                340, 23,
+                500, 109,
+                300, 109
+            ],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            tension: 1
+        });
+
+        layer.add(spline);
+        stage.add(layer);
+
+        var tween = new Kinetic.Tween({
+            node: layer,
+            duration: 1,
+            clipWidth: 500,
+            clipHeight: 200,
+            easing: Kinetic.Easings.BackEaseOut
+        });
+
+        stage.getContent().addEventListener('mouseover', function() {
+          tween.play();
+        });
+
+        stage.getContent().addEventListener('mouseout', function() {
+          tween.reverse();
+        });
+
     },
     'ease-in, ease-out, ease-in-out hovers': function(containerId) {
         var stage = new Kinetic.Stage({