Question

I am trying to load multiple images onto a canvas using html5 img tag.
and images are replaceable .eg there are 5 list of images
The images are also draggable
and onclick of a particular images replaces the last uploaded image from the same list,
The problem I’m facing is that when I upload a new element it comes on top of other.
and onclick of the bottom element I want it to move to top and drag.
I tried to used the kineticjs function called move to top but nothing is happening..I also checked the library and it’s fine…
I can’t paste my full code here cause it too big.
Here is the part where I’m trying to add the move to top functionality:

          function drawImageOnLayer(layer, img) {
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 200 ;
            var width = 200;
            var height = 400;

            var kinecticImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(img, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            kinecticImg.draggable(true);

this function is not working

        kinecticImg.on("mousedown", function(){
            this.moveToTop();
           layer.draw();

End

        });
            layer.clear();
            layer.add(kinecticImg);

            layer.draw();

        }

Answer 1

Got it..
had to do
Layer.moveToTop();
and it worked like a charm