Tentei fazer o exercício utilizando o for - tentei antes utilizando duas funções e if, mas em nenhum caso consegui promover o deslizamento. Enfim, deixo aqui o código simples que tirei pra saber se pode ser aproveitado, se a lógica está certa o que falta.

<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 = 'violet';
    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()  {

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

}
    setInterval(atualizaTela, 10);



</script>