CC Animate HTML5 Canvas - Bring Button to Front on Click

[#1]

I have two buttons on a canvas. They are slightly overlapping. When the user clicks on one button, I would like that button to be brought to the top (or in front) of the other button. 

So, a click on a button should always bring it to the top so the whole button is visible to the user. 

Thanks for any any help on this!

[#2]

Hi.

You can use the addChild or setChildIndex method from the createjs.Container class. In this case, you're going to call one of these two methods from the buttons parent.

Examples:

addChild approach (ES5 syntax):

this.bringToFront = function(e)
{
    e.currentTarget.parent.addChild(e.currentTarget);
};

this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

addChild approach (ES6 syntax):

this.bringToFront = e => e.currentTarget.parent.addChild(e.currentTarget);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

setChildIndex approach (ES5 syntax):

this.bringToFront = function(e)
{
    e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
};

this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

setChildIndex approach (ES6 syntax):

this.bringToFront = e => e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

I hope this helps.

Regards,

JC

[#3]

Thank you so much!! I will try it out, and report back 🙂

[#4]

Just what I needed! I used the event "mousedown" instead of "click" to instantly move to front on a mouse click. Thanks again!