Deleting only the clicked element, not the other elements on the canvas

i am new to coding. Currently creating a game for a school project.

In short, random circles or "targets" will pop up on the screen, and the user has to click them. I tried to make something that would create a new canvas without the clicked circle, but instead it creates an empty canvas and the loop goes again. How do i keep the "un-clicked" circles on my new canvas?

I am sorry if that made no sense :D. If you have any tips, i would appreciate if you could dumb it down for me :D. Any help would be greatly appreciated.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radiustracker = [];
var xpos = [];
var ypos = [];
var radius;
var x;
var y;
var color = 'blue';
ctx.fillStyle = 'lightblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function randomize() {
  radius = Math.floor(Math.random() * 25) + 10;
  x = Math.floor(Math.random() * 600) + 50;
  y = Math.floor(Math.random() * 400) + 50;
  radiustracker.push(radius);
  xpos.push(x);
  ypos.push(y);
  drawCircle(x, y, radius);
}

function drawCircle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function clickCircle(xmus, ymus) {
  for (var i = 0; i < xpos.length; i++) {
    var distance =
      Math.sqrt(
        ((xmus - xpos[i]) * (xmus - xpos[i])) +
        ((ymus - ypos[i]) * (ymus - ypos[i]))
      );
    console.log(distance);
    if (distance < radiustracker[i]) {
      radiustracker[i] = 0;
      ctx.fillStyle = 'lightblue';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
  }
}

var intervall = setInterval(randomize, 1000);
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  clickCircle(x, y);
});
#canvas {
  display:inline;
  margins:auto;
}
<body>
<canvas id="canvas" height="500" width="700" ></canvas>
</body>

3 thoughts on “Deleting only the clicked element, not the other elements on the canvas”

Leave a Comment