A bolinha esta sendo gerada normalmente, a colisão com a raquete está correta mas não entendo porque a bolinha quando vai para o lado direito ela esta ultrapassando os limites da tela de meu monitor, desconfio que o problema está sendo gerado devido eu utilizar um monitor/TV 1280x720p

//variáveis bolinha
let xBolinha = 300;
let yBolinha = 200;
let dmBolinha = 20;
let raio = dmBolinha / 2;

//velocidade da bolinha
let vxBolinha = 5.5;
let vyBolinha = 5.5;

//variáveis raquete
let xRaquete = 1
let yRaquete = 170;
let widthRaquete = 15;
let heightRaquete = 80;
let hit = false;

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

function draw() {
  background(0);
  MostraBolinha();
  MovimentoBolinha();
  ColisaoBorda();
  MostraRaquete();
  MovimentoRaquete();
  //ColisaoRaquete();
  CoRaqueteBibli();

}
function MostraBolinha(){
  circle(xBolinha,yBolinha,dmBolinha);
}
function MovimentoBolinha(){
xBolinha += vxBolinha;
  //yBolinha += vyBolinha;
}
function ColisaoBorda(){
  if ( xBolinha + raio >width ||
     xBolinha - raio <0){
    vxBolinha *= -1;
  }
  if ( yBolinha + raio>height ||
     yBolinha - raio <0){
    vyBolinha *= -1; }
}
function MostraRaquete(){
  rect(xRaquete,yRaquete,widthRaquete,heightRaquete)
}
function MovimentoRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){ 
    yRaquete += 10;
  }
}
function ColisaoRaquete(){
  if(xBolinha - raio< xRaquete + widthRaquete && yBolinha - raio < yRaquete + heightRaquete && yBolinha + raio > yRaquete){  
    vxBolinha *= -1
  }
}

function CoRaqueteBibli(){
 hit =
  collideRectCircle(xRaquete, yRaquete, widthRaquete, heightRaquete, xBolinha, yBolinha, dmBolinha);
  if (hit){
    vxBolinha *= -1
  }