Bolinha não se movimenta do jeito certo

A bolinha não inverte certo o movimento, ela volta na direção oposta e não sai disso. Porém não estou fazendo pelo site "p5.js" e sim pelo editor VS, usando também o conhecimento dos Cursos de Lógica de Programação I e II. Acredito que o problema esteja, especificamente, na função "movimentaBolinha".

<canvas width="600" height="400"></canvas>
<script>

    function draw(){
        limpaTela();
        pintaTela();
        raquete();
        movimentaBolinha();
        colisaoBolinhaRaquete();
        movimentaRaquete();

    }
      function movimentaBolinha(){
        bolinha(xBolinha,yBolinha);
        xBolinha += sentido;
        yBolinha += sentido;   
        if (xBolinha + raio > 600 || xBolinha - raio < 0){
            sentido *= -1;
        }else   if (yBolinha + raio > 400 || yBolinha - raio < 0){
            sentido *= -1;    
        }
}
    function pintaTela(){
        pincel.fillStyle="black";
        pincel.fillRect(0,0,600,400);
    }
    function raquete(){
        pincel.fillStyle="white";
        pincel.fillRect(xRaquete,yRaquete,raqueteComprimento,raqueteAltura);   
    }
    function bolinha(xBolinha,yBolinha){
        pincel.fillStyle="white";
        pincel.beginPath();
        pincel.arc(xBolinha,yBolinha,raio,0,2*Math.PI);
        pincel.fill();
    }
    function limpaTela(){
        pincel.clearRect(0,0,600,400);
    }

    function movimentaRaquete(evento){
        if(evento.keyCode == cima){
            yRaquete -= taxa;
        } else if(evento.keyCode == baixo){
            yRaquete += taxa;
        }
    }
    function colisaoBolinhaRaquete(){
        if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura
        && yBolinha + raio > yRaquete){
            sentido *= -1;
        }
    }

    document.onkeydown = movimentaRaquete;
    setInterval(draw);

    //variáveis da tela
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    //variáveis da bolinha
    var raio = 10;
    var xBolinha = 300;
    var yBolinha = 200;
    //variáveis da raquete
    var xRaquete = 10;
    var yRaquete = 200;
    var raqueteAltura = 75;
    var raqueteComprimento = 10;
    //variávies de movimento
    var sentido = 1;
    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;
    var taxa = 20;


</script>