Javascript 如何在html画布中绘制的光盘中检测单击？

我正在尝试制作类似于osu的东西，我可以点击一张光盘，然后弹出一张新的。现在，每当我点击画布上的任何地方，就会出现一张新的光盘，旧的光盘就会被清除。我需要它只发生在我点击当前光盘时。我怎样才能做到这一点？ 为了澄清一点，屏幕上一次只能有一张光盘。每当我点击它，画布将被清除，一个新的光盘将创建在画布上的随机坐标

这是到目前为止我的javascript代码：

var elem = document.getElementById('myCanvas');
elem.onclick = function(){ 
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,1000,750);

    ctx.beginPath();
    var posx = Math.floor(Math.random() * 950);
    var posy = Math.floor(Math.random() * 625)
    ctx.arc(posx+25, posy+25, 25, 0, 2 * Math.PI);
    ctx.stroke();
    var myColors = ['blue', 'red', 'green', 'yellow', 'black', 'maroon'];
    var selectedcolor = myColors[Math.floor(Math.random() * myColors.length)];
    ctx.fillStyle = selectedcolor;
    ctx.fill();
}

---

你能澄清一下你到底想发生什么吗。如果用户点击一张磁盘，你想弹出一张新的，但它会在哪里弹出？然后用户可以点击其中一个磁盘并弹出第三个磁盘吗？此外，你是否必须使用canvas-如果可以的话，但是要找出你在给定的canvas中的对象有点混乱，因为它没有“对象”的概念，特别是当它们彼此重叠时。在你的onclick代码中，你没有得到鼠标坐标，获取它们，然后检查位置是否在你的磁盘中。这是否回答了你的问题？