Alvo

Minha solução:

<canvas width="600" height="400"></canvas>
<div>
  <p style="color: red; font-weight: bold">Erros<label id="erros"></label></p>
  <p style="color: blue; font-weight: bold">
    Acertos<label id="Acertos"></label>
  </p>
  <button>Reset</button>
</div>

<script>
  let acerto = document.querySelector("#acertos");
  let erros = document.querySelector("#erros");
  let button = document.querySelector("button");

  let raio = 10;
  let qtdAcerto = 0;
  let qtdErro = 0;

  erros.style.color = "red";
  acerto.style.color = "blue";

  let tela = document.querySelector("canvas");
  let pincel = tela.getContext("2d");
  pincel.fillStyle = "lightgray";
  pincel.fillRect(0, 0, 600, 400);


  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");
  desenhaCirculo(300, 200, raio + 10, "white");
  desenhaCirculo(300, 200, raio, "red");

  dispara = (evento) => {
    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;
    if (x >= 290 && x <= 310 && y >= 190 && y <= 210) {
      alert("Acertou");
      qtdAcerto++;
      acerto.innerHTML = ` ${qtdAcerto}`;
    } else {
      alert("Errou!");
      qtdErro++;
      erros.innerHTML = ` ${qtdErro}`;
    }
  };

  zerar = () => {
    acerto.innerHTML = "";
    erros.innerHTML = "";
    qtdAcerto = 0;
    qtdErro = 0;
  };

  button.addEventListener("click", zerar);

  tela.addEventListener("click", dispara);
</script>