Olá segue solução que encontrei com os conhecimento apresentados até agora, esta bom ? caso tenha algum coisa a melhorar ficarei feliz em saber.
<meta charset = "UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
pincel.fillRect(0, 0, 600, 400);
var x = 300;
var y = 200;
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();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400)
}
function movimentaAlvo() {
limpaTela();
x = Math.floor(Math.random() * 550);
y = Math.floor(Math.random() * 350);
desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
desenhaCirculo(x, y, raio + 10, 'white');
desenhaCirculo(x, y, raio, 'red'); // menor circulo
console.log(x, y);
}
setInterval(movimentaAlvo, 900);
function dispara(evento) {
var posx = evento.pageX - tela.offsetLeft;
var posy = evento.pageY - tela.offsetTop;
if( (posx > x - raio)&&
(posx < x + raio)&&
(posy > y - raio)&&
(posy < y + raio)) {
alert('Parabéns você abertou!');
}
console.log('posição mouse' + posx, posy);
}
tela.onclick = dispara;
</script>