Não consigo achar o erro

Olá, gostaria de uma ajuda no esclarecimento do motivo pelo qual o código não está funcionando corretamente. Quando a variável era apenas "x" não estava funcionando com a função "dispara", mas quando mudei para "xA" ela passou a funcionar, mesma coisa para o "y". Vou deixar os dois códigos abaixo. O que não funcinou:

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

<script>

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

pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeStyle="red";
pincel.lineWidth=2;
pincel.strokeRect(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.beginPath()
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0, 0, 600, 400);
 }
function desenhaAlvo(x,y,){
    limpaTela();
    pincel.strokeStyle="red";
    pincel.lineWidth=2;
    pincel.strokeRect(0,0,600,400);
    x= numeroGerado(38,570);
    y= numeroGerado(38,370);
    desenhaCirculo(x,y,r+20,"red");
    desenhaCirculo(x,y,r+10,"white");
    desenhaCirculo(x,y,r,"red"); 
    console.log(x,y);
}


function numeroGerado(minimo,maximo){
   var fora=true;
   while(fora){
    var numero=Math.floor(Math.random()*maximo);
        if(numero>minimo && numero<maximo){
            fora=false;
        }
   }
   return numero;
}

function dispara(evento){
    var xPagina= evento.pageX-tela.offsetLeft;
    var yPagina=evento.pageY-tela.offsetTop;
    console.log(x,y);
        if((xPagina< x+r) 
            && (xPagina>x-r)
            && (yPagina<y+r)
            && (yPagina>y-r)){
            alert("Você acertou");
        } 
}

setInterval(desenhaAlvo,2000);
tela.onclick=dispara;




</script>

Funcionou:

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

<script>

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

pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeStyle="red";
pincel.lineWidth=2;
pincel.strokeRect(0,0,600,400);

function desenhaCirculo(x, y, raio,cor) {

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(xA, yA, raio, 0, 2 * Math.PI);
    pincel.fill();

 }

 function limpaTela() {
    pincel.beginPath()
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0, 0, 600, 400);
 }
function desenhaAlvo(x,y,){
    limpaTela();
    pincel.strokeStyle="red";
    pincel.lineWidth=2;
    pincel.strokeRect(0,0,600,400);
    xA= numeroGerado(38,570);
    yA= numeroGerado(38,370);
    desenhaCirculo(xA,yA,r+20,"red");
    desenhaCirculo(xA,yA,r+10,"white");
    desenhaCirculo(xA,yA,r,"red"); 
    console.log(xA,yA);
}


function numeroGerado(minimo,maximo){
   var fora=true;
   while(fora){
    var numero=Math.floor(Math.random()*maximo);
        if(numero>minimo && numero<maximo){
            fora=false;
        }
   }
   return numero;
}

function dispara(evento){
    var xPagina= evento.pageX-tela.offsetLeft;
    var yPagina=evento.pageY-tela.offsetTop;
    console.log(xA,yA);
        if((xPagina< xA+r) 
            && (xPagina>xA-r)
            && (yPagina<yA+r)
            && (yPagina>yA-r)){
            alert("Você acertou");
        } 
}

setInterval(desenhaAlvo,2000);
tela.onclick=dispara;

</script>