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>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>