Código com alterações para considerar o raio.

Fiz uma pequena alteração para ser considerado o raio da bolinha, utilizando um conhecimento de um outro curso que fiz aqui pela alura (o de desenvolver o jogo PingPong com JS). Do jeito que o prof Flávio tinha feito, "comia" metade da bolinha quando chegava no fim, só ajustei isso. Se alguém puder conferir, agradeço!

<canvas width="600" height="400"></canvas>
<meta charset=" utf-8">
<script>

 let canvas = document.querySelector ('canvas');
 let tela = canvas.getContext ('2d');

 tela.fillStyle = 'lightblue';
 tela.fillRect (0, 0, 600, 400);


    function desenhaCirculo (x, y, raio){


        tela.fillStyle = 'red';
        tela.beginPath ();
        tela.arc(x, y, raio, 0, 2*Math.PI)
        tela. fill();

    }

    function limpaTela (){
        tela.clearRect (0,0, 600, 600);

    }
        let sentido = 1
        let raio = 10;
        let x = 20;

    function atualizaTela (){
        limpaTela();

          if (x + raio > 600){  
              sentido = -1;

          } else if (x - raio < 0){
                sentido = 1;
            }

          desenhaCirculo (x, 20, 10);
            x = x + sentido;
    }


    setInterval (atualizaTela, 10);



</script>