Uma forma diferente

Olá a todos, creio ter entendido de uma forma diferente o exercicio e fiz a logica como se a bolinha pasasse pelo canva e voltasse a posição inicial e não como como se ela quicasse e voltasse

O codigo abaixo:

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

<script type="text/javascript">

    let screen = document.querySelector("canvas");
    let pen = screen.getContext("2d");
    pen.fillStyle = "grey";
    pen.fillRect(0, 0, 600, 400);

//função que desenha uma bolinha na tela conforme os parametros de X, Y, e Raio
    function drawBall(x, y, raio) {

        pen.fillStyle = "blue";
        pen.beginPath();
        pen.arc(x, y, raio, 0, 2 * Math.PI);
        pen.fill();    
    }

//Função que limpa o cenario 
    function clearScreen(){

        pen.clearRect(0, 0, 600, 400);
    }

//variavel de apoio
    let x = 20

//uma função que atualiza a tela em determinado tempo onde chama a função de drawBall() que recebe os parametros X, Y , e Raio
    function updateScreen() {
//após a bolinha ser desenhada é acrescentado +1 a variavel X do desenho da bolinha.
    if (x > 600) {

        x = 20
    }else{

        clearScreen();
        drawBall(x, 20, 10);        
        x++;
     }    
    }

//Essa função aceita receber, como parâmetro, a função que você deseja chamar e, depois, a quantidade de tempo que desejamos dar de intervalo em milissegundos.
    setInterval(updateScreen, 10);


</script>

Não sei se esta errado, qualquer critica é bem vinda