Mouseover only active once I'm on my canvas and not my shape-CodePudding

i'm a beginner using canvas and also javascript and I'm trying to use the mouseover. I got to get it work a bit but it's only when the mouse is on the canvas, I'd like to make my square color change once my mouse is on it.

How can I get it work ?

Here's my code :

    window.onload = function()
    {
        canvasEvent();
    }

    function canvasEvent()
    {
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");
        ctx.rect(150, 150, 100, 100);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.stroke();   

        c.addEventListener("mouseover", hover, false);
        c.addEventListener("mouseout", hoverOut, false);
    }

    function hover(e)
    {
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.stroke();
    }

    function hoverOut(e)
    {
        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle = 'blue';
        ctx.fill();
    }

canvas#canvas{
    background-color:#DDDDDD;
    display: block;
    margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEST</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <center>
        <canvas id="canvas" width="550" height="400"></canvas>
    </center>
</body>
</html>

CodePudding user response：

just check if mouse is on rectangle

window.onload = function()
{
    canvasEvent();
}

function canvasEvent()
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(150, 150, 100, 100);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.stroke();   

    c.addEventListener("mousemove", e => { 

      if (
        e.offsetX >=150 && 
        e.offsetX <= 250 && 
        e.offsetY >= 150 && 
        e.offsetY<=250){
          hover();
      }
      else{
      hoverOut();
      }
    });
}

function hover(e)
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();
}

function hoverOut(e)
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle = 'blue';
    ctx.fill();
}

canvas#canvas{
    background-color:#DDDDDD;
    display: block;
    margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEST</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <center>
        <canvas id="canvas" width="550" height="400"></canvas>
    </center>
</body>
</html>