Bring shapes to front on click in Kinetic JS

Question

Is there a way to bring shapes to the front of an html canvas once the shape has been 'selected' or clicked on in Kinetic JS? I can add styles to the shapes just fine but I am having trouble bringing the selected shape to the front. I've seen hundreds of examples using separate buttons to move them to the front. Is there a this.moveToTop()?

This is the code I am currently using for adding a shadow to my shapes once selected

triangle.on('mouseover touchstart', function() {
    this.setShadowOpacity(1);
    layer.draw();
});

triangle.on('mouseout touchend', function() {
    this.setShadowOpacity(0);
    layer.draw();
});

Answer 1

Yes, you can use triangle.moveToTop() inside a mouseover or click listener on the node.

Demo: http://jsfiddle.net/m1erickson/gQeEB/

circle1.on("click",function(){
    circle1.moveToTop();
    layer.draw();
});