В какой-то момент, отскакивающий от краёв канваса мяч, попадает в баг и ведет себя аномально

Пишу небольшую програмку для отображения отскакивающего от краёв мяча. Некоторое время все работает хорошо, но в какой-то момент, по неизвестной причине, оно начинает "уползать" за края канваса:

Как видно на скрине, координата X пошла в минус, хотя не должна.

Предполагаю, что это связано с этим условием, которое внутри функции draw(), которая в свою очередь, выполняется большое количество раз, и значение направления мяча просто начинает бесконечно меняться между положительным и отрицательным значением:

if (xPos+ballSize>=cvs.width||xPos<=0) {
  xKof+=Math.random()/10;
  xKof= -xKof;
}

Весь код:

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var speed = 5; // SPEED
var xPos = 150;
var yPos = 50;
var xKof = Math.random();
var yKof = Math.random();
var ballSize = 20;
var ball = new Image();
ball.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Soccerball.svg/1024px-Soccerball.svg.png";
function draw() {
 ctx.clearRect(0,0,cvs.width,cvs.height);
 ctx.drawImage(ball, xPos, yPos, ballSize, ballSize);
 xPos+=xKof*speed;
 yPos+=yKof*speed;
 if (xPos+ballSize>=cvs.width||xPos<=0) {
    xKof+=Math.random()/10;
    xKof= -xKof;
 }
 if (yPos+ballSize>=cvs.height||yPos<=0) {
    yKof+=Math.random()/10;
    yKof= -yKof;
 }
 ctx.fillStyle = "#000";
 ctx.font = "12px Verdana";
 ctx.fillText("X: " + Math.round(xPos*100)/100, 10, cvs.height - 20);
 ctx.fillText("Y: " + Math.round(yPos*100)/100, 10, cvs.height - 10);
 requestAnimationFrame(draw); 
}
ball.onload = draw;

JSFiddle: https://jsfiddle.net/sazdan/60pqsLxv/34/