Pulsar a cada andar.

Olá pessoal, como vocês estão?

Com a ideia de exercitar mais ainda a lógica, tive a ideia de fazer o exercício da bolinha que pulsa, só que com a bolinha pulsando gradativamente a cada posição nova que ela assume,usando as limitações entre 20 e 30.

segue meu código abaixo;

indico para ver melhor colocar o setInterval para uns 500, pois você verá que ele pulsa até o raio 30, dai então começa a andar, e o comportamento que quero é, a cada x++; que ele fizer, ele fazer raio++;, com limite onde o raio tem que sempre se manter entre 20 a 30!

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

<script type="text/javascript">

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

    var cores = ['blue', 'red', 'green', 'black','orange'];
   var indiceCorAtual = 0;

    function desenhaCirculo(x, y, raio) {
        pincel.fillStyle = cores [indiceCorAtual];
        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 sentido = 1;

    function bolinhaIndo() {    
        limpaTela();
        desenhaCirculo(x, 20, raio);
        x++;
    }

    function bolinhaVoltando(){
        limpaTela();
        desenhaCirculo(x, 20, raio);
        x = x - 1;
    }
var raio = 20;
function pulsar(){
        raio++;
        if (raio >= 30){
            raio = raio -1;
        }
       }


    function atualizaTela() {

        if (x > 600) {
          sentido = -1;
        } else if ( x <= 0 ) {
          sentido = 1; 
        }
        if (sentido == -1){
          bolinhaVoltando();
        }
        else if (sentido == 1){
          bolinhaIndo();
        }
          pulsar();

    }



function mudacor(){

           indiceCorAtual++

           if(indiceCorAtual >= cores.length){
               indiceCorAtual = 0


           }

           return false;
       }


    setInterval(atualizaTela, 20);


    tela.oncontextmenu = mudacor;
</script>