Meu alvo ficou preto. Alguém pode me ajudar?
<canvas id="tela" width="600" height="400" />
<script>
var raio = 10;
var alvoX;
var alvoY;
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var desenhaAlvo = function(x,y){
circulo(x,y,raio+30,"white");
circulo(x,y,raio+20,"red");
circulo(x,y,raio+10,"white");
circulo(x,y,raio,"red");
}
var circulo = function(x,y,raio,cor){
c.fillRect = cor;
c.beginPath();
c.arc(x,y,raio,0,2*Math.PI);
c.fill();
}
var limpaTela = function(){
c.clearRect(0,0,600,400);
}
var sorteia = function(max){
return Math.floor(Math.random()*max)
}
var desenha = function(){
limpaTela();
alvoX = sorteia (600);
alvoY = sorteia (400);
desenhaAlvo(alvoX,alvoY);
}
setInterval(desenha,1000);
tela.onclick = function(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("Você acertou. Parabéns");
}
}
</script>