Problemas com a colisão

Ao meu ver, o código está idêntico ao do exemplo, mas na colisão do eixo X com width a bola passa da borda e volta (só mudei o nome das variáveis).

var xBall = 300
var yBall = 200
var ballDiameter = 17
var ray = ballDiameter / 2;

var ballSpeedX = 6
var ballSpeedY = 6


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

function draw() {
  background (0);
  ball();
  ballMovement();
  ballCollision();
}

function ball(){
  circle(xBall, yBall, ballDiameter);
}

function ballMovement(){
  xBall += ballSpeedX;
  //yBall += ballSpeedY;
}

function ballCollision() {
  if (xBall + ray > width || xBall - ray < 0) {
    ballSpeedX *= -1;
  }
  if (yBall + ray > height || yBall - ray < 0) {
    ballSpeedY *= -1;
  }
}

Minha solução foi alterar a largura do canvas para 580, o que fez o código funcionar perfeitamente .

var xBall = 300
var yBall = 200
var ballDiameter = 17
var ray = ballDiameter / 2;

var ballSpeedX = 6
var ballSpeedY = 6


function setup() {
  createCanvas (580,400)
}

function draw() {
  background (0);
  ball();
  ballMovement();
  ballCollision();
}

function ball(){
  circle(xBall, yBall, ballDiameter);
}

function ballMovement(){
  xBall += ballSpeedX;
  yBall += ballSpeedY;
}

function ballCollision() {
  if (xBall + ray > width || xBall - ray < 0) {
    ballSpeedX *= -1;
  }
  if (yBall + ray > height || yBall - ray < 0) {
    ballSpeedY *= -1;
  }
}