O que pode ser melhorado no meu código

A sua bolinha só volta porque em um momento você atribui à variável x o valor 20, mas logo depois atribui o valor 580, e é este 580 que vai constar quando seu programa começar a rodar, ou seja, vai considerar que a bolinha já está no final da tela. Neste exercício não dá so para implementar um contador incremental e outro decremental, pois também há o sentido do movimento. Veja a solução dada na aula, bem simples inclusive:

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    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 sentido = 1;

    function atualizaTela() {
        limpaTela();

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

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

    setInterval(atualizaTela, 10);

</script>

O contador é "inteligente", e já dá incrementos positivos ou negativos que não se alteram até chegar aos limites.

Obrigado! Eu não sabia poderia trabalhar com intervalos fora do canvas que foi definido.

Ah, você se refere aos limites de 0 e 600. Você pode ajustá-los à sua necessidade, e se exceder os limites do canvas, só não vai exibir a bolinha. Ela vai parecer que sai fora do quadro, cortada. Mas pode usar ajustar os limites que você usou a este contador/identificador de sentido.