Resolução Diferente

Realizado código diferente, ficou mais lento, mas creio que consegui chegar ao resultado do exercício.

<canvas width="600" height="400"></canvas>
    <script>
      var tela = window.document.querySelector("canvas");
      var pincel = tela.getContext("2d");
      pincel.fillStyle = "#cfcfcf";
      pincel.fillRect(0, 0, 600, 400);

      function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
      }
      var tamanhoMinimo = 20;
      var tamanhoMaximo = 30;
      var x = 300;
      var y = 200;
      var raio = 20;

      function desenhaCirculo(x, y, raio) {
        pincel.fillStyle = "#0000ff";
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
      }

      function atualizaTela() {
          limpaTela();
        if (raio <= tamanhoMinimo) {   
          desenhaCirculo(x, y, tamanhoMinimo);
          raio += 1;
        } else if (raio <= tamanhoMaximo) {
          desenhaCirculo(x, y, tamanhoMaximo);
          raio -= 1;
        }
      }

      setInterval(atualizaTela, 240);
    </script>