fixed #609 and also made sure that layer.clear() also clears the hit context

src/Context.js

@@ -151,13 +151,14 @@
          * @method
          * @memberof Kinetic.Context.prototype
          */
-        clear: function(clip) {
+        clear: function() {
-            var canvas = this.getCanvas(),
+            var args = [].slice.call(arguments),
+                canvas = this.getCanvas(),
                 pos, size;
             
-            if (clip) {
+            if (args.length) {
-                pos = Kinetic.Util._getXY(clip);
+                pos = Kinetic.Util._getXY(args);
-                size = Kinetic.Util._getSize(clip);
+                size = Kinetic.Util._getSize(args);
                 this.clearRect(pos.x || 0, pos.y || 0, size.width, size.height);
             }
             else {

src/Layer.js

@@ -104,15 +104,20 @@
             return this.getCanvas().getContext();
         },
         /**
-         * clear canvas tied to the layer
+         * clear scene and hit canvas contexts tied to the layer
          * @method
          * @memberof Kinetic.Node.prototype
-         * @param {Object} [clip] clipping bounds
+         * @param {Array|Object} [bounds]
          * @example
-         * layer.clear([0, 0, 100, 100])
+         * layer.clear();<br>
+         * layer.clear(0, 0, 100, 100);
          */
-        clear: function(clip) {
+        clear: function() {
-            this.getCanvas().clear(clip);
+            var context = this.getContext(),
+                hitContext = this.getHitCanvas().getContext();
+
+            context.clear.apply(context, arguments);
+            hitContext.clear.apply(hitContext, arguments);
             return this;
         },
         // extend Node.prototype.setVisible

test/unit/Layer-test.js

@@ -29,6 +29,78 @@ suite('Layer', function() {
         assert.equal(style.left, '0px', 'canvas left should be 0px');
     });
 
+    test('test clear()', function(){
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: 100,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+  
+        circle.colorKey = '#000000';
+     
+        circle.on('mouseover', function() {
+          console.log('mouseover');
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        layer.clear();
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);');
+
+        var hitTrace = layer.getHitCanvas().getContext().getTrace();
+        //console.log(hitTrace);
+        assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=#000000;fill();restore();lineWidth=4;strokeStyle=#000000;stroke();restore();clearRect(0,0,578,200);');
+
+        showHit(layer);
+    });
+
+    test('test clear() with bounds', function(){
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: 100,
+            y: 100,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+  
+        circle.colorKey = '#000000';
+     
+        circle.on('mouseover', function() {
+          console.log('mouseover');
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        layer.clear(100, 100, 100, 100);
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(100,100,100,100);');
+
+        var hitTrace = layer.getHitCanvas().getContext().getTrace();
+        //console.log(hitTrace);
+        assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=#000000;fill();restore();lineWidth=4;strokeStyle=#000000;stroke();restore();clearRect(100,100,100,100);');
+
+        showHit(layer);
+    });
+
     // ======================================================
     test('layer getIntersection()', function() {
         var stage = addStage();