O Pulso ainda Pulsa | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="800" height="600"></canvas>

    <script>
 //criar a tela
 let tela = document.querySelector("canvas");
        //criar pincel
        let pincel = tela.getContext('2d');

        //desenhando a tela
        pincel.fillStyle = "#002244"
        pincel.fillRect(0,0,800,600);
        pincel.fill();

        function desenharTela(){
            pincel.fillStyle = "#002244"
            pincel.fillRect(0,0,800,600);
            pincel.fill();
        }

       //criando a bolinha
       function criarBolinha(x, y, raio){
            pincel.fillStyle="#69BE28";
            pincel.beginPath();
            pincel.arc(x,y, raio, 0, 2 * Math.PI);
            pincel.fill();
            console.log(raio);
        }

        function limpaTela() {
            pincel.clearRect(0, 0, 800, 600);
            desenharTela();            
        }

        let raioMaximo = 30;
        let raioMinino = 20;
        let raio = 20;
        let contador=1;

        function atualizarTela(){
            if (raio >= raioMaximo){
                contador = -1;
            } else if (raio <= raioMinino){
                contador = 1;
            }

            limpaTela();
            raio = raio + contador;
            criarBolinha(400,300,raio);          
        }

        setInterval(atualizarTela, 20);       

    </script>
</body>
</html>