Funcionamento do código

Olá, bom dia, tudo bem?

Segue o meu código da bolinha pulsante. Eu fiz assim, porém tenho uma dúvida. Quando eu tiro a parte do código "desenhaCirculo(x, 20, 10); x++;" Ele funciona, a minha pergunta é, porque eu não posso incluir esse código?

<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 limpaTela() {

        pincel.clearRect(0, 0, 600, 400); 
    }

    var bolinha = 20; 

    var pulso = 1; 

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, 20, 10); 
        x++; 

        if(bolinha < 20) {
            pulso = 1;
        }

        if(bolinha > 30) {
            pulso = -1; 
        }

        desenhaCirculo(250, 150, bolinha, "blue");
        bolinha = bolinha + pulso; 
    }

    setInterval(atualizaTela, 20); 

</script>