Tiro as variáveis xAleatorio e yAleatorio da função actualizaTela e o alvo para de se movimentar de forma aleatória

Boa tarde, pessoal. Estou com uma questão estranha. Tinha as variáveis abaixo

    var xAleatorio = sorteiaPosicao(600);
    var yAleatorio = sorteiaPosicao(400);

dentro da função atualizaTela. Quando dentro da função, o alvo estava movimentando-se de forma aleatória na tela (o esperado) Ao tirar as variáveis da função e deixá-las globais, o alvo parou de se movimentar, ficando estático. Alguma ideia? Código completo abaixo com as variáveis fora da função;

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

<script>

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

var raio = 15;

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

function desenhaAlvo(x, y){
    desenhaCirculo(x,y,raio + 25,"red");
    desenhaCirculo(x,y,raio + 15, "white");
    desenhaCirculo(x,y, raio, "red");

}

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

function sorteiaPosicao(maximo){

    return Math.floor(Math.random() * maximo);



}

    var xAleatorio = sorteiaPosicao(600);
    var yAleatorio = sorteiaPosicao(400);

function atualizaTela(){

    limpaTela();
    desenhaAlvo(xAleatorio, yAleatorio);


}

function tiro(evento){

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    alert("acertou!");
}


tela.onclick = tiro;

setInterval (atualizaTela, 500);




</script>