Fazer a animação Retornar x--

Oi Raphael, formatei o seu código pra ficar mais fácil o entendimento

var x = 20;

function atualizaTela() {
    limpaTela();

     if (x <=600) { 
        desenhaCirculo(x, 20, 10);
        x++;
    } else if((x >20) { 
        desenhaCirculo(x, 20, 10);
        x--; 
    }
}

setInterval(atualizaTela, 10);

Dois pontos a considerar aqui:

1º : O seu segundo if possui um parenteses a mais na abertura, veja: else if((x >20)

2º: Analisando o seu algoritmo, ele irá incrementar até o número 601. Após isso, ele irá decrementar uma vez, ou seja, irá voltar para 600. Na próxima iteração ele entrará novamente no primeiro if (pois é menor ou igual que 600), e irá incrementar novamente para 601.

Resumindo: ele ficará alternando entre 600 e 601 indefinidamente.

Segue susgestão de um algoritmo (não testado):

var x = 20;
var incrementa = true;

function atualizaTela() {
    limpaTela();

    if (incrementa) {
        desenhaCirculo(x, 20, 10);
        x++;
    } else {
        desenhaCirculo(x, 20, 10);
        x--; 
    }

    if (x > 600) {
        incrementa = false;
    }

    if (x <= 20) {
        incrementa = true;
    }
}

setInterval(atualizaTela, 10);

Abaixo, segue um exemplo mais completo, que eu criei agora. Neste exemplo o círculo irá aumentar e diminuir entre os tamanhos de raio 20 e 300:

<canvas id="myCanvas" width="1024" height="768"></canvas>

<script type="text/javascript">
    var x = 20;
    var incrementa = true;

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    function atualizaTela() {
        limpaTela();

        if (incrementa) {
            desenhaCirculo(x);
            x++;
        } else {
            desenhaCirculo(x);
            x--; 
        }

        if (x > 300) {
            incrementa = false;
        }

        if (x <= 20) {
            incrementa = true;
        }
    }

    function desenhaCirculo(radius) {
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = '#003300';
        context.stroke();
    }

    function limpaTela() {
        context.clearRect(0, 0, canvas.width, canvas.height)
    }

    setInterval(atualizaTela, 10);
</script>