How to create a hover button on canvas?

Question

I am using a tool container for different functions. What I want to know is how to create a hoover for my eraser button when is active and when inactive.

Here are some bits of code if is helping.

//loader
this.manifest = [
            {src:'images/brush.png',    id:'brush',    link: 'tool'},   
            {src:'images/eraser.png',   id:'eraser',   link: 'tool'},
            {src:'images/clear.png',    id:'clear',    link: 'tool'}
        ];

//eraser tool - Here is setting the position of button.
        var eraser = new createjs.Bitmap(app.loader.getResult('eraser'));
        eraser.name = 'eraser';
        eraser.x = brush.x + 90;
        eraser.y = brush.y;
        eraser.addEventListener('click', this.eraserHandler); 
        this.toolsContainer.addChild(eraser);


// eraser handler function
eraserHandler: function(){
        console.log("erase");
        app.erase = 1 - app.erase;
    },

Answer 1

not 100% sure of what you want but if you want to change the way your eraser button is displayed when ever it's active or not then you could handle it in your function eraserHandler :

eraserHandler: function(){
    console.log("erase");
    //replacing the image with an active image
    eraser.image=app.loader.getResult('eraserActive');
    app.erase = 1 - app.erase;
},

i just replace the image property but you could do anything else like adding shadow, adding a mask or a filter proerty, then don't forget to update your canvas... :)