Melhorando a pulsação

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'gray';
    pincel.fillRect(0, 0, 600, 400);

    ///////////////////////////////////////////////////
    // Função que desenha o círculo central
    //////////////////////////////////////////////////
    function desenhaCirculoCentro(x, y, raio,cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();//inicia o desenho
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill(); 
    }

    /////////////////////////////////////////////
    // Função que desenha o círculo à esquerda
    ///////////////////////////////////////////
    function desenhaCirculoAcimaEsquerda(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();//inicia o desenho
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill(); 
    }

    /////////////////////////////////////////////
    // Função que desenha o círculo à direita
    ////////////////////////////////////////////
    function desenhaCirculoAcimaDireita(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();//inicia o desenho
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill(); 
    }

    /////////////////////////////////////////////
    // Função que limpa a tela
    ///////////////////////////////////////////

    function limpaTela() {
        pincel.clearRect(0,0,600,400); // apaga as bolinhas anteriores
    }



    ///////////////////////////////////////////////////////////////
    // Função que faz a bolinha esquerda se encontar com a do centro
    ///////////////////////////////////////////////////////////////
    var xe = 40
    var sentidoe = 1;
    var ye = 200;
    function BolinhasSeEncontramEsquerda(event) {
        if (xe <= 300){
            sentidoe = 1;
            desenhaCirculoAcimaEsquerda(xe, ye ,raio,cor);
            xe = xe + sentidoe;
        } 
    }


    ///////////////////////////////////////////////////////////////
    // Função que faz a bolinha direita se encontar com a do centro
    ///////////////////////////////////////////////////////////////
    var xd = 540
    var sentidod = 1;
    var yd = 200;
    function BolinhasSeEncontramDireita(event) {
        if (xd >= 300){
            sentidod = -1;
            desenhaCirculoAcimaDireita(xd,yd,raio,cor);
            xd = xd + sentidod;
        } 
    }


    ///////////////////////////////////////////////////////////////
    // Função que faz as bolinhas pulsarem
    ///////////////////////////////////////////////////////////////
    var raio = 20;
    var fator = 1; // variável que determina o aumento e diminuição do raio
    var cor= 'Blue';
    var fim = 0 ; /// Contador para terminar a pulsação
    function atualizaTela() {
        limpaTela();
        if (fim == 100){ /// Qdo o contador chega a 100 a pulsação para e as bolinhas começam a se mover
            desenhaCirculoCentro(300,200,raio,cor);
            BolinhasSeEncontramEsquerda();
            BolinhasSeEncontramDireita();
            return;
        }
        if (raio > 30){
            fator = -1;
            cor ='yellow'
        } else if (raio < 20) {
            fator = 1;
            cor = 'blue'
           ;
        }
        desenhaCirculoCentro(300,200,raio,cor);
        desenhaCirculoAcimaEsquerda(40,200,raio,cor);
        desenhaCirculoAcimaDireita(540,200,raio,cor);
        raio = raio + fator;
        fim++;        
    }

    setInterval(atualizaTela, 20); // Determina o intervalo de tempo em que as bolinhas pulsam

</script>