Check if mouse is in or out of window

Question

I have seen that this type of question has already been answered, however every answer is a little vague or has some cross-compatibility issues or is too beyond my understanding.So is there anyone who can give my an up-to-date, full,clear (showing and explaining all the steps involved) answer?I would like not to make the circles grow in size when the mouse is outside the window.I am not using JQuery(featured in many answers).Should I use it?Is there any way to implement this with pure javascript? Thank you for your help and sorry if my code is a little bit redundant :)

var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
    x: undefined,
    y: undefined
}
window.addEventListener("mousemove", function(event){
    mouse.x = event.x;
    mouse.y = event.y;
})
window.addEventListener("resize", function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})


var colorArray = [
    "#6CC61D",
    "#E05132",
    "#278E83",
    "#A633D4"
]

function Circle(x,y,dx,dy,radius){
    this.x  = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

    this.draw = function(){
        c.beginPath();
        c.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
        c.fillStyle = this.color;
        c.fill()
    }
    this.update = function(){
        if (this.x + this.radius>window.innerWidth  ||  this.x -this.radius<0){
            this.dx = - this.dx;}
        if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
            this.dy = - this.dy;
        }
        if (mouse.x - this.x < 50 && mouse.x - this.x > - 50 && mouse.y - this.y < 50 && mouse.y - this.y > - 50 && this.radius<50 ){
            this.radius += 1;
        }
        else if(this.radius>2){
            this.radius -= 1;
        }
        this.x += this.dx;
        this.y += this.dy;
        this.draw();
    
}
}
var circleArray = [];
for (var i = 0; i < 600; i++) {
    var x = Math.random() * (window.innerWidth - radius * 2) + radius;
    var y = Math.random() * (window.innerHeight - radius * 2) + radius;
    var dy = (Math.random() - 0.5) * 8;
    var dx = (Math.random() - 0.5) * 8;
    var radius = 30;

        circleArray.push(new Circle(x, y, dx, dy, radius));
    }




function animate(){
    requestAnimationFrame(animate);
    c.clearRect(0,0,window.innerWidth,window.innerHeight);
    for (var i = 0;i < circleArray.length;i++){
        circleArray[i].update()
    }
    circle.update();
}
animate();

Does this answer your question? [How can I detect when the mouse leaves the window?](https://stackoverflow.com/questions/923299/how-can-i-detect-when-the-mouse-leaves-the-window) — Kordrad, Jul 12 '21 at 12:53
All the answers have comments that show some issues, and all of them are a little bit difficult. — Alex D'ago, Jul 12 '21 at 12:59

score 1 · Accepted Answer · answered Jul 15 '21 at 00:10

I am not using JQuery (featured in many answers). Should I use it ?

Is there any way to implement this with pure javascript ?

It's according to your preferences. As JQuery is javascript, if you can do it with JQuery, you can do it with JS only. For what is about "Is it implementable ?", most likely. I will start to format a bit your code to decouple the logic (calculs/updating positions, speed & radius) from the rendering (drawing), it will be easier to operate.

Checking if the mouse is out of window :

You can use the mouseout event to detect when the mouse leave the window

window.addEventListener('mouseout', action);

Avoid the circles to grow in size when the mouse is outside the window :

For the action, set back the mouse.x & mouse.y to undefined

window.addEventListener('mouseout', function(){
  mouse.x = undefined;
  mouse.y = undefined;
})

and then add 2 more conditions in your Circle update method to only grow the radius if, in addition of the others conditions, mouse.x & mouse.y are defined (so if the mouse is in the window).

if (mouse.x &&
    mouse.y &&
    Math.abs(mouse.x - this.x) < 50 &&
    Math.abs(mouse.y - this.y) < 50 &&
    this.radius < 50 ) {
    this.radius += 1;
}

Result :

const canvas = document.querySelector("canvas");
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const mouse = {
    x: undefined,
    y: undefined
}

window.addEventListener("mousemove", function(event){
    mouse.x = event.x;
    mouse.y = event.y;
})

window.addEventListener("resize", function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})

window.addEventListener('mouseout', function(){
  mouse.x = undefined;
  mouse.y = undefined;
})

const colorArray = [
    "#6CC61D",
    "#E05132",
    "#278E83",
    "#A633D4"
]

function Circle(x, y, dx, dy, radius){
    this.x  = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

    this.draw = function(){
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
        c.fillStyle = this.color;
        c.fill()
    }
    
    this.update = function(){
    
        if (this.x + this.radius > window.innerWidth  || this.x - this.radius < 0) {
            this.dx = - this.dx;
        }
        
        if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
            this.dy = - this.dy;
        }
        
        if (  mouse.x &&
              mouse.y && 
              Math.abs(mouse.x - this.x) < 50 &&
              Math.abs(mouse.y - this.y) < 50 &&
              this.radius < 50 ) {
            this.radius += 1;
        } else if(this.radius > 2) {
            this.radius -= 1;
        }
        
        this.x += this.dx;
        this.y += this.dy;
    }
}

const circleArray = [];

for (let i = 0; i < 600; i++) {
    const radius = 30;
    const x = Math.random() * (window.innerWidth - radius * 2) + radius;
    const y = Math.random() * (window.innerHeight - radius * 2) + radius;
    const dy = (Math.random() - 0.5) * 8;
    const dx = (Math.random() - 0.5) * 8;
    circleArray.push(new Circle(x, y, dx, dy, radius));
}

function clearCanvas(){
  c.clearRect(0,0,window.innerWidth,window.innerHeight);
}

function update(){
  for (let i = 0; i < circleArray.length; i++){
    circleArray[i].update()
  }
}

function draw(){
  for (let i = 0; i < circleArray.length; i++){
    circleArray[i].draw()
  }
}

function animate(){

    requestAnimationFrame(animate);
    
    clearCanvas();
    
    update();
    
    draw();
}

requestAnimationFrame(animate);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />  
</head>
<body>
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</body>
</html>

Check if mouse is in or out of window

1 Answers1

Checking if the mouse is out of window :

Avoid the circles to grow in size when the mouse is outside the window :

Result :