var x=20 dentro ou fora da function atualizaTela?

Olá pessoal, Tenho uma dúvida sobre a localização da declaração "var x = 20". Ainda me perco e não sei exatamente o porquê que ela deve estar localizada fora da function atualizaTela. Tentei colocá-la dentro da atualizaTela, mas a animação não foi executada e o círculo ficou parado. Se possível, gostaria de saber melhor porque isso acontece. Segue o código completo abaixo:

<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) {
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2*Math.PI);
        pincel.fill();
    }

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

    var x = 20;

    function atualizaTela() {
        limpaTela();
        desenhaCirculo(x,20,10);
        x++;
    }

    setInterval(atualizaTela, 10);

</script>