A solução proposta na resposta do professor é simples e prática mas não é precisa. Veja que se vc clicar um pouquinho fora do circulo nas diagonais o programa te diz que acertou mas na realidade errou. A solução que eu achei é mais precisa, porque não tem esse problema. Claro, não sei se do ponto de vista computacional é a melhor, mas pelo menos funciona. Para isso calculei a distancia do ponto do clique ao centro do circulo. Se essa distancia é menor ao raio acertou, senão errou. Esta explicado no código.
<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 círculo
desenhaCirculo(300,200, raio + 10, 'white');
desenhaCirculo(300,200, raio, 'red'); // menor circulo
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
// lógica de acerto?
/*
if (x > 300 - raio
&& x < 300 + raio
&& y > 200 - raio
&& y < 200 + raio) {
}
-------------------------------------------------------------------
// Outra lógica de acerto?
*/
// -------------------------------------------------------------------
// PRIMEIRA PARTE:
// Calcula distancia desde o ponto do clique
// até o centro do alvo.
var a = Math.abs(200 - y); // estas instrucoes calculam a distancia do
var b = Math.abs(300 - x); // ponto do clique até o centro do alvo nos
// eixos y e x
var a2 = Math.pow(a,2); // estas instrucoes calculam os quadrados das
var b2 = Math.pow(b,2); // distancias a e b calculas anteriormente
var c = Math.sqrt(a2 + b2); // calcula a distancia final, c
// -------------------------------------------------------------------
// SEGUNDA PARTE
// Compara a discancia c (distancia do clique
// até o centro do alvo)
if (c <= raio) {
alert('Acertou'); // Se essa distancia é menor do que o raio
} // significa que acertou no alvo.
else alert('Errou'); // Se essa distancia é maior, significa
// significa que errou.
}
tela.onclick = dispara;
</script>