Pulsar

Oi, Luan, tudo bem?

Que bom que deu certo! Parabéns! Você tem esse código completo pra vermos como a bolinha pulsa? Ou você está pondo no GitHub?

Desculpe a demora, eu havia apagado o arquivo, e tive que refazer meu raciocínio para tentar reproduzir de novo. Mas eis aqui o código dela pulsando ao invez de crescer e diminuir gradativamente.

Tentei implementar o codigo e fazer ela pulsar como o coração. A ideia é pulsar a cada 300ms esperar 600ms e depois pulsar denovo mais 300ms dando uma espaçada entre os dois pulsos.

Mas as vezes ele da uma bugada e fica pulsando sem parar, e as vezes volta a pulsar como codificado...

Ps.: Alguns codigos eu estou colocando no GitHub, apenas aqueles que eu considero que foram mais complexos pra eu executar. Ou aqueles que eu simplesmente gostei da proposta rsrs

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

<script>

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

    pincel.fillStyle = "white";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, r) {
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, r, 0, 2 * Math.PI);
        pincel.fill();
    }

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

    function atualizaTela() {
        limpaTela();
        desenhaCirculo(50, 50, r);

        if(r == 20) {
            r = 40;
        } else if(r == 40) {
            r = 20;
        } 
    }

    function pulsa() {
        desenhaCirculo(50, 50, r);
        setInterval (atualizaTela, 300);

        if( r == 20) {
            r = 40;
        } else if(r == 20) {
            r = 40;
        }
    }

    setInterval (pulsa, 600);

</script>