A bolinha chega no final e não volta.

Olá,
No seu código possui alguns erros, vou colocar aqui o correto e o seu para você conseguir entender ok?

<canvas width="600" height="400"></canvas>
** Seu código está sem o cabeçalho que traz as ações do 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);
            }
**Seu código esta parte está correto, o problema começa para baixo, vou colocar o correto em baixo como apenas comentário e assim você conseguirá localizar todos os erros que cometeu e entender ok?**

Abaixo está seu código com alguns erros.     
       var x = 20;
            function atualizaTela() {
                if(x < 600){
                    limpaTela();
                    desenhaCirculo(x, 20, 10);
                    x += 1;
                }
                else if (x > 20){
                    limpaTela();
                    desenhaCirculo(x, 20, 10);
                    x -= 1;
                }
            }
            setInterval(atualizaTela, 10);

Esse abaixo seria o código correto para sua bolinha ir e voltar.
    var x = 20;

    var sentido = 1 
É preciso criar a variável acima -  Ela começará com o valor 1, indicando que nossa variável x deve ser incrementada de 1 em 1. Quando x for maior que 600, sentido receberá -1, o que fará o decremento da variável x.

Agora, dentro da função atualizaTela aqui abaixo, antes de desenharmos nossa bolinha, vamos verificar se precisamos alterar o valor de sentido

    function atualizaTela() {

        limpaTela();

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

        desenhaCirculo(x, 20, 10);

Agora que sempre verificamos se sentido precisa ser alterado, logo depois de desenharmos nosso círculo, vamos usar o valor da nossa variável na hora do incremento de x:
        x = x + sentido;

    }

        setInterval(atualizaTela, 10);
*/

        </script>