código diferente

Olá, meu código está rodando com a bolinha indo da direita para a esquerda, somente. Como eu poderia fazer ela ir da esquerda para a direita e vice e versa, com o que fiz abaixo?

<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector ("canvas");
var pincel = tela.getContext ("2d");
pincel.fillStyle = "gray";
pincel.fillRect (0,0,600,400);

function desenhaCirculo (x,y,raio,cor){
    pincel.fillStyle = cor;
    pincel.beginPath ();
    pincel.arc (x,y,raio,0,2*Math.PI);
    pincel.fill ();
}

function limpaTela(){
    pincel.clearRect (0,0,600,400);
}

var x=20;
function atualizaTela () {
    limpaTela();
    desenhaCirculo (x,20,10,"blue");
    x++
}
setInterval (atualizaTela, 10);

var x2=600;
function direitaParaEsquerda () {
    limpaTela();
    desenhaCirculo (x2,20,10,"blue");
    x2=x2-1;
}
setInterval (direitaParaEsquerda, 10);
</script>