I have rectangle inside canvas and I want to do something whenever mouse hover that rectangle.
with my code mousemove fires only on slow mouse movements but I want to fire mousemove on fast movements too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
box-sizing: border-box ;
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="anime.min.js"></script>
<script>
let canvas = document.querySelector('canvas') ;
canvas.width = window.innerWidth ;
canvas.height = window.innerHeight ;
let rectX = canvas.width/2;
let rectY = 0 ;
let rectWidth = 10 ;
let rectHeight = canvas.height ;
let ctx = canvas.getContext('2d') ;
ctx.beginPath() ;
ctx.rect(rectX,rectY,rectWidth,rectHeight) ;
ctx.fillStyle = 'black' ;
ctx.fill() ;
canvas.addEventListener('mousemove',function(e){
if(e.x >= rectX && e.x <= rectX+rectWidth) {
console.log('overlap') ;
}
});
</script>
</body>
</html>
