soy un principiante que usa canvas y también javascript y estoy tratando de usar el mouseover. Tengo que hacer que funcione un poco, pero solo cuando el mouse está sobre el lienzo, me gustaría hacer que mi cuadrado cambie de color una vez que mi mouse esté sobre él.
¿Cómo puedo hacer que funcione?
Aquí está mi código:
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>solo verifica si el mouse está en el rectángulo
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>