Bolinha não fica indo e voltando eternamente

Olá, durante o exercício que solicita criar um código onde a bolinha vá e volte constantemente, consegui fazer com que ela fosse e voltasse apenas uma vez. Percebi que quando a variável 'retorna' chega em 20 a segunda função não entra no if proposto, chamando assim novamente a função atualizaTela, mas sim ela continua fazendo o decremento infinitamente. Seguindo a lógica de uma função chamar a outra para realizar a ida e volta eterna, como poderia corrigir este problema?

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

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio){

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

    function limpaTela(){

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

    var x = 20;
    var retorna = 600;

    function atualizaTela(){

            limpaTela();
            desenhaCirculo(x, 20, 10);
            x++; 
        if(x >= 600){
            atualizaTelaVolta();
        }
    }

    function atualizaTelaVolta(){

            limpaTela();
            desenhaCirculo(retorna, 20, 10);
            retorna--;
            console.log(retorna);
        if(retorna <= 20){
            atualizaTela();
        }

    }

    setInterval(atualizaTela, 5);

</script>