title: Kinetic.js removing image from canvas on click of a button outside the canvas
body: <p>Need some help..
  I don't know if it's the kinetic.js library problem or I'm doing something wrong here..
  I am loading 2 images on windows.onload
  and then there are set of images outside the canvas and onclick of the images I'm placing those inside the canvas which is working fine..(I have used just a single function to load any image from outside the canvas by doing this..
  Set of images :</p>
  
  <pre><code>     &lt;li&gt;
          &lt;a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))"&gt;
  
          &lt;img src="&lt;?php echo base_url()?&gt;images/eagle/baby1.png" id="i3"  alt="Pulpitrock"width="100" height="120" /&gt;&lt;/a&gt;
           &lt;a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))"&gt;Close&lt;/a&gt;
         &lt;/li&gt;
       &lt;li&gt;
          &lt;a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))"&gt;
          &lt;img src="&lt;?php echo base_url()?&gt;images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /&gt;&lt;/a&gt;
          &lt;a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))"&gt;Close&lt;/a&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>loading images</p>
  
  <pre><code>         function loadWithType(img){
          var sources = {
              yoda1 : img.src,
          };
          loadImages(sources,initStage1);
        };
  </code></pre>
  
  <p>function(defining position and all)</p>
  
  <pre><code>           function initStage1(images){ 
  
              layert = new Kinetic.Layer();
  
              var yoda1 = new Kinetic.Image({
              image: images.yoda1,
              x: 106,
              y: 0,
              width: 180,
              height: 220,
              draggable:true,
              detectionType: "pixel"
  
              });
  
  
                      /*
                       * check if animal is in the right spot and
                       * snap into place if it is
                       */
                      yoda1.on("dragend", function() {
                              layert.draw();
                              // disable drag and drop
  
                              yoda1.saveImageData();
                      });
  
              layert.add(yoda1);
              stage.add(layert);
              yoda1.saveImageData();
  
              }
  </code></pre>
  
  <p>THis is working fine..(loading the images on clicking over them)</p>
  
  <p>But when I try to remove the images by a button close..
  I m having trouble as the latest image gets removed and after that library throws me an error..
  I'm doing something like this..</p>
  
  <pre><code>          function removewithType(img){
          var sources = {
              yoda1 :img.src,
          };
          loadImages(sources,removeStage1);
          }
  
           function removeStage1(images){
  
                  var yoda1 = new Kinetic.Image({
                  image: images.yoda1,
                  x: 106,
                  y: 0,
                  width: 180,
                  height: 220,
                  draggable:true,
  
              });
                  layert.clear();
                  stage.remove(layert);
                  layert.draw();
  
                   }
  </code></pre>
  
  <p>here first of all..
  layert.remov(yoda1) function is not working.</p>
  
  <p>and this function is behaving in an unexpected way..</p>
  
  <p>any pointers</p>
  
  <p>Thanks..</p>