Oi Marco tudo bem?

Não funciona porque você tava declarando o código da função atualizaTela dentro do while. E declarando assim não faz passar o código durante a execução.

Ou seja você não tava chamando a função, só declarando ela.

Dei uma mudada no código para você. Ao invés de começar quando inicia a página programei para iniciar quando clicar no canvas.

<canvas onclick="main();" 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);
    }

    function main(){

        var x = 20;

       while (x <= 580) {       


            limpaTela();
            desenhaCirculo(x, 20, 10);
            x++;


            setInterval(atualizaTela, 10);
        }

        var x = 580;

        while (x >= 20) {


            limpaTela();
            desenhaCirculo(x, 20, 10);
            x = x - 1;

           setInterval(atualizaTela, 10);
        }

    }

</script>

Espero ter ajudado!!!

Não sei se é apenas no meu pc, mas esse código também não funcionou como pedia o exercício.

Tentei outras alterações, mas ainda não consegui.

Oi Marco, coloquei o código nessa página de testes https://codepen.io/anon/pen/bOeNQa quando entrar deverá aparecer a bola azul do exercício.

Caso isso não aconteça tira printscreen da tela usando o site www.imgur.com e me passa o nome e versão do navegador que está usando.

Oi Marco quando seu navegador travar ao rodar um script considere se nele tem alguma estrutura de repetição como (while, for) que não finaliza, ou seja, revise as condições de inicialização, condição de parada e incremento.

Outra coisa que precisamos compreender é que o método setInterval chama uma função ou trecho de código de tempos em tempos (no caso você colocou que a cada 10 milisegundos) ele vai chamar a função atualizaTela que limpaTela, desenha o círculo e incrementa o valor de x, só que esse x da função não é visto pelo while eles estão em escopos diferentes.

Por isso essa lógica não da certo, precisamos de uma forma de checar em nossa função que vai ser chamada de tempos em tempos o valor de x, para determinar se a bolinha deve ir incrementando ou decrementando.Uma implementação seria a seguinte:

var x=10;
  vai=true;

function atualizaTela(){
    if(x==590){
      vai=false;
      volta=true;
    }
    if(x==10){
      volta=false;
      vai=true;
    }
    if(vai){
      x++;
    }
    if(volta){
      x--;
    }
    limpaTela();
    desenhaCirculo(x,20,raio);
  }

  setInterval(atualizaTela,10);

Observe que de fora da função eu tenho o setInterval ele vai chamar a função atualizaTela e dentro dela eu tenho as condições para detectar a colisão das bordas e mudar o sentido. Se quiser ver o código completo.

Espero ter ajudado e bons estudos.