Como fazer a bolinha mudar de cor?

Olá William, tudo certo?

Peço desculpa pela demora em te responder.

Fiz alguns testes e encontrei uma solução para essa questão que você levantou:

var x = 20;
var valor = 0;

function atualizaTela() {
    setInterval(valor+=1, 1000);
    console.log(valor);
  limpaTela();
  desenhaCirculo(x, 20, 10, cor[Math.floor(valor/100)]);
  x++;
}

De início temos uma nova variável var valor = 0 que vai ser responsável por estar contabilizando basicamente a distância do círculo. Dentro da função atualizaTela() adicionei um setInterval() que está adicionando + 1 para a variável valor a cada segundo.

Com isso quando chamo a função desenhaCirculo() e passo como parâmetro cor[Math.floor(valor/100)] transformando o valor que está em valor dividido por 100 e arredondado pela função Math.floor(), com isso todos os valores vão estar entre 1 e 6, assim passando por toda a lista de cores que foi criada anteriormente.

<canvas width="600" height="400"></canvas>
<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);

    var cor = ["blue", "red", "green", "yellow", "purple", "orange"];

    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;
    var valor = 0;

    function atualizaTela() {
        setInterval(valor+=1, 1000);
        console.log(valor);
        limpaTela();
        desenhaCirculo(x, 20, 10, cor[Math.floor(valor/100)]);
        x++;

    }
    setInterval(atualizaTela, 20);

</script>

E no código acima você pode ver o código completo, o de base que você havia passado juntamente com as modificações que eu realizei.

Espero que eu tenha lhe ajudado, caso ainda tenha dúvidas vou estar a sua disposição. Abraços e bons estudos!