Tenho um alvo na tela preciso identificar quando é realizado o click no circulo central vermelho do alvo e exibir um alert
quando ocorrer. Tentei pegar as coordenadas e o tamanho do raio mas acaba formando um quadrado. Se tiver uma forma de pegar as coordenadas do circulo ou identificar através da cor.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
desenhaCirculo(300,200, raio + 20, 'red'); // maior circulo
desenhaCirculo(300,200, raio + 10, 'white');
desenhaCirculo(300,200, raio, 'red'); // menor circulo
function dispara(pCordenadas) {
let lValorX = pCordenadas.pageX - tela.offsetLeft;
let lValorY = pCordenadas.pageY - tela.offsetTop;
//const lDiferencaY = lValorY > 202 ? lValorY - 202 : lValorY;
//const lDiferencaX = lValorX > 302 ? lValorX - 302 : lValorX;
if ((lValorY >= 190 && lValorY <= 210) && (lValorX >= 290 && lValorX <= 310)){
alert("Acertou!")
}
}
tela.onclick = dispara;
</script>
</head>
<body>
</body>
</html>
Todo o código para formar o alvo e a tentativa abaixo para o alert.