Kinetic.js removing image from canvas on click of

Question

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 :

     <li>
        <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))">

        <img src="<?php echo base_url()?>images/eagle/baby1.png" id="i3"  alt="Pulpitrock"width="100" height="120" /></a>
         <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))">Close</a>
       </li>
     <li>
        <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))">
        <img src="<?php echo base_url()?>images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /></a>
        <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))">Close</a>
        </li>

loading images

         function loadWithType(img){
        var sources = {
            yoda1 : img.src,
        };
        loadImages(sources,initStage1);
      };

function(defining position and all)

           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();

            }

THis is working fine..(loading the images on clicking over them)

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..

          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();

                 }

here first of all.. layert.remov(yoda1) function is not working.

and this function is behaving in an unexpected way..

any pointers

Thanks..

Answer 1

If the reason that you are removing the image is hiding it, you can simply use .hide() function:

yoda1.hide();
layert.draw();

Another issue with your code is you used layert.draw(); after you removed it stage.remove(layert);, so when you have removed this layer you can't draw it.