canvas button onmouseover change color

Question

I have a drawButtons function that takes an argument of " nonhover ", " hover1 " or " hover2 " and draws up a new button set to the canvas, and depending on the argument it takes, will draw the buttons different colors. It does work when i call it from setUpGame() but not when I call it from draw() . I want to call it from draw() because draw() is called 80 times a second in setInterval() . That way it can keep checking if the mouse is hovering over the button and draw the appropriate button set.

setUpGame() is called outside of any object or function. draw() is called by setInterval() which is outside of any function or object. setInterval calls draw 80 times a second.

getMouseOver() another function that is the one that should actually be called by draw() , because it says "if mouse is over button one: drawButtons("hover1") and so on. It just doesn't draw the buttons when I call it.

There are no errors in the browser Javascript console. I am using Chrome which works best with my game.

From this we can deduce that there is no problem with drawButtons() as it worked when called from setUpGame() .

There is possibly a problem with draw() as drawButtons() doesn't work when I call it from there (but to perplex us more, displayNumbers does display the numbers when I call it from there) and it worked fine when playing the game (here we are not playing the game, we are on a start screen).

There is probably a problem with getMouseOver() because that doesn't work anywhere.

I will show you getMouseOver() for now. My program is getting big and it is overwhelming to show too much right from the start. I intend for this function to be called 80 times a second.

getMouseOver: function() {
    window.onload = (function(){
        window.onmouseover = function(e) {
            // IE doesn't always have e here
            e = e || window.event;

            // get event location

            // change the code so that it gives the relative location
            var location = {
            x: e.pageX - offset.x,
            y: e.pageY - offset.y
            };
            if (location.x > 103.5 && location.x < 265.5) {
                if (location.y > 240 && location.y < 291) {
                    nonGameContent.drawButtons("hover1");
                }
            }
            if (location.x > 103.5 && location.x < 265.5) {
                if (location.y > 160 && location.y < 212) {
                    nonGameContent.drawButtons("hover2");
                }
            }
            else{
                nonGameContent.drawButtons("nonHover");
            }
        }
    })},

Answer 1

In this fiddle you have click() and onmousemove() that are working. I didn't understand well if you want to display button at the beginning or just when the mouse hovers somewhere on the future place of the button but it's a beginning : http://jsfiddle.net/Akinaru/3a7g2/57/

Main modification :

 canvas.onmousedown = nonGameContent.getMouseClick;
 canvas.onmousemove = nonGameContent.getMouseOver;

Answer 2

to change the canvas rectangle color when you mouse over it use onmousemove to find if you are over it, then redraw the canvas with a different color rectangle

getMouseClick: function() { window.onmousemove = function(e) {