MINHA SOLUCAO

<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);

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

    }

    function apagaFundo(){
        pincel.clearRect(0,0,600,400)
    }

    var x = 20;
    var sentido = 1
    function animaBolinha(){

        apagaFundo();

        if(x >= 600){
            sentido = - 1
        } else if (x <= 0) {
            sentido = 1
        }
        desenhaCirculo(x,20,10,"pink");
        x = x + sentido

    }

    var raio = 10;
    var crescente = 10

    function pulsaBolinha() {        

        apagaFundo()
        if (raio >= 40){
            crescente = -10
        } else if (raio >= 20){
            crescente = 10
        }
        desenhaCirculo(300,200,raio,"pink");
        raio = raio + crescente

    }

    setInterval(pulsaBolinha, 100)

</script>