Possível código para a bolinha pulsando

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

<script>

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

// Fundo cinza:

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

// Desenho da bolinha:

    function desenhaCirculo (x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath ();
        pincel.arc (x, y, raio, 0, 2*Math.PI);
        pincel.fill ();

    }

// Limpeza de rastro da bolinha:

    function limpaTela () {

        pincel.clearRect (0, 0, 600, 400);

    }


        var raio = 20;

        function variaRaio () {

            limpaTela ();

            if (raio < 20) {

            raio = raio + 1;

            }


            if (raio >= 20 && raio <= 30) {

            raio = raio + 1;


            } else if (raio > 30 ) {

            raio = raio - 1;

            } 


        desenhaCirculo (100, 100, raio, 'blue');

        } 


    setInterval (variaRaio, 20);



</script>