Exercício com um pequeno adicional

Uau que bacana sua troca de cores!! Apesar de que não entendi como você fez isso funcionar, achei muito legal!! Se quiseres explicar, ou colocar teu código comentado nessa parte das cores, eu gostaria!

Bom estudos!

<meta charset="utf-8">
<canvas width="600" height="600"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var cores = ['blue','red', 'green', 'yellow']   // Array das cores que você deseja colocar para que fique alterando;
    var indiceAtualCor = 0   // índice necessário para indicar qual a posição|cor que está sempre que o "++" entrar em cena, 0 = blue| 1 = red e assim vai...

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 600);

    var raio = 20
    var crescimento = 0

    function desenhaCirculo(x, y, raio){

        pincel.fillStyle= cores[indiceAtualCor];  // aqui você põe o var do ARRAY que você deu para indicar as cores e o indice entre colchetes para mostrar a posição que está
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2*Math.PI);
        pincel.fill();

    }

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

    function atualizaTela(){

        var x = 300;
        var y = 300;
        limparTela();

        desenhaCirculo (x, y, raio);

        if (raio >= 30){
            crescimento = -1
         } else if (raio<= 20){
            crescimento = 1
         }
         raio = raio + crescimento;
    }


    setInterval(atualizaTela, 20)

    function mudarCor(){   // AQUI ESTÁ A FUNÇÃO PARA MUDAR A COR
        indiceAtualCor++   // O ++ PARA PULAR PARA A PRÓXIMA COR
        if (indiceAtualCor>=cores.length) {    // ESSE "IF" SERVE PARA QUE quando o índice se tornar maior que a quantidade de cores (cores.length), independente da quantidade, ele retorne para a cor inicial que está na posição 0
            indiceAtualCor = 0    // aqui a posição zero "blue"
        }
    }

    tela.onclick = mudarCor // para que o evento funcione com o clique no mouse, tela.onclick para chamar a função mudarCor


</script>

no clique do mouse você pode fazer a bola crescer também ou diminuir até certo tamanho, só precisa usar a criatividade