O alvo não aparece

Não consigo encontrar o problema que faz com que meu alvo não apareça. Segue meu código:

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

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

c.fillStyle = 'gray';
c.fillRect (0,0,600,400);

var raio = 10;

var AlvoX;
var AlvoY;

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

function limpa() {
    c.clearRect (0, 0, 600, 400);
}

function desenhaAlvo(x,y) {
    circulo(x,y,raio+20,'red');
    circulo(x,y,raio+10,'white');
    circulo(x,y,raio,'red');
}

function sorteia(x) {
    return Math.floor(Math.random() * x);
}

function desenha() {
    limpa();
    alvoX = sorteia(600);
    alvoY = sorteia(400);
    desenhaAlvo(AlvoX, AlvoY);
}

setInterval(desenha,1000);

function atira(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > AlvoX - raio) 
        && (x < AlvoX + raio) 
        && (y > AlvoY - raio) 
        && (y < AlvoY + raio)) {

            alert('Acertou!');
    }
}

tela.onclick = atira;

</script>