fix #93 rather than detecting if a layer is listening or visible, I think it's cleaner to hide and show the buffer canvas along with the scene canvas inside the setVisible method

dist/kinetic-core.js

@@ -2994,23 +2994,21 @@ Kinetic.Stage.prototype = {
          */
         for(var n = layers.length - 1; n >= 0; n--) {
             var layer = layers[n];
-            if(layer.isVisible() && layer.isListening()) {
+            var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
-                var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
+            // this indicates that a buffer pixel may have been found
-                // this indicates that a buffer pixel may have been found
+            if(p[3] === 255) {
-                if(p[3] === 255) {
+                var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
-                    var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
+                shape = Kinetic.Global.shapes[colorKey];
-                    shape = Kinetic.Global.shapes[colorKey];
+                return {
-                    return {
+                    shape: shape,
-                        shape: shape,
+                    pixel: p
-                        pixel: p
+                };
-                    };
+            }
-                }
+            // if no shape mapped to that pixel, return pixel array
-                // if no shape mapped to that pixel, return pixel array
+            else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
-                else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
+                return {
-                    return {
+                    pixel: p
-                        pixel: p
+                };
-                    };
-                }
             }
         }
 
@@ -3041,14 +3039,14 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     add: function(layer) {
-        Kinetic.Container.prototype.add.call(this, layer);
+    	Kinetic.Container.prototype.add.call(this, 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);
-
+        
         // chainable
         return this;
     },
@@ -3580,9 +3578,11 @@ Kinetic.Layer.prototype = {
         Kinetic.Node.prototype.setVisible.call(this, visible);
         if(visible) {
             this.canvas.element.style.display = 'block';
+            this.bufferCanvas.element.style.display = 'block';
         }
         else {
             this.canvas.element.style.display = 'none';
+            this.bufferCanvas.element.style.display = 'none';
         }
     },
     moveToTop: function() {

src/Layer.js

@@ -138,9 +138,11 @@ Kinetic.Layer.prototype = {
         Kinetic.Node.prototype.setVisible.call(this, visible);
         if(visible) {
             this.canvas.element.style.display = 'block';
+            this.bufferCanvas.element.style.display = 'block';
         }
         else {
             this.canvas.element.style.display = 'none';
+            this.bufferCanvas.element.style.display = 'none';
         }
     },
     moveToTop: function() {

src/Stage.js

@@ -368,23 +368,21 @@ Kinetic.Stage.prototype = {
          */
         for(var n = layers.length - 1; n >= 0; n--) {
             var layer = layers[n];
-            if(layer.isVisible() && layer.isListening()) {
+            var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
-                var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
+            // this indicates that a buffer pixel may have been found
-                // this indicates that a buffer pixel may have been found
+            if(p[3] === 255) {
-                if(p[3] === 255) {
+                var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
-                    var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
+                shape = Kinetic.Global.shapes[colorKey];
-                    shape = Kinetic.Global.shapes[colorKey];
+                return {
-                    return {
+                    shape: shape,
-                        shape: shape,
+                    pixel: p
-                        pixel: p
+                };
-                    };
+            }
-                }
+            // if no shape mapped to that pixel, return pixel array
-                // if no shape mapped to that pixel, return pixel array
+            else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
-                else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) {
+                return {
-                    return {
+                    pixel: p
-                        pixel: p
+                };
-                    };
-                }
             }
         }
 
@@ -415,14 +413,14 @@ Kinetic.Stage.prototype = {
      * @param {Layer} layer
      */
     add: function(layer) {
-        Kinetic.Container.prototype.add.call(this, layer);
+    	Kinetic.Container.prototype.add.call(this, 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);
-
+        
         // chainable
         return this;
     },