Bolinha que pulsa.

Boa noite. Assim ficou minha programação.

<canvas width="800" height="500"></canvas>          

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 20, 800, 500);
    var cores = ['blue', 'red', 'black','yellow','green','purple']
    var contador = 0
    var raio = 20

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = cores[contador];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {              // função criada para limpar a tela
    pincel.clearRect(0, 20, 800, 500);
    }

    var x = 20;         // variavel de x inicial
    var sentido = 1         // variavel para mudar sentido
    var alteraRaio = 1

    function atualizaTela() { // função criada para criar a animação ( Limpa o desenho anterior, desenha o circulo e avança 1 em x)
        limpaTela();
        desenhaCirculo(x, 60, raio);  

        if(x > 800) {
            sentido = -1
        }  else if(x < 0) {
            sentido = 1
        }

        if(raio > 30) {
            alteraRaio = -1
        } else if(raio < 20) {
            alteraRaio = 1
        }

        x = x + sentido
        raio = raio + alteraRaio
    }

    function trocarCor() {
        contador++;

        if(contador > 5) {
          contador = 0;  
        }
    }


    setInterval(atualizaTela, 20);          // chamar a função da animação com o adicional de tempo.
    setInterval(trocarCor, 500);

</script>