Trying to make a square go around the canvas but when it hits the bottom left corner it just leaves the screen

Question

When my square hits the bottom left corner it is suppose to go up but it doesn't, I don't know what the issue is because as I can see it suppose to go up again, all of this was made in p5.js so if you want the check what's wrong go on their website.

I have tried playing around with the values a little but nothing clicks, I am at a loss.

let x,y;
let side = [false,false,false,false]



function setup() {
  createCanvas(400, 400);
  

  x = width/2.25;
  y = height/2.25;


}

function draw() {
  background(255);
  

  fill(0,0,0);
  rect(x, y, 50, 50);
  
 
  

      if(side[0] == false && side[1] == false && side[2] == false && side[3] == false){
     x = x - 5;
}
  

      if(side[0] == true && side[1] == false && side[2] == false && side[3] == false){
     y = y - 5;
}


      if(side[0] == false && side[1] == true && side[2] == false && side[3] == false){
     x = x + 5;
}
  

      if(side[0] == false && side[1] == false && side[2] == true && side[3] == false){
     y = y + 5;
        
}
  



  if(x < 0){
    side[0] = true;
    side[1] = false;
    side[2] = false;
    side[3] = false;
  }
  
  

  if(y < 0){
    side[0] = false;
    side[1] = true;
    side[2] = false;
    side[3] = false;
  }
  

    if(x > width-50){
    side[0] = false;
    side[1] = false;
    side[2] = true;
    side[3] = false;
  }
  

  if(y > height-50){
    side[0] = false;
    side[1] = false;
    side[2] = false;
    side[3] = false;
  }

}