Как создать круг объектов и подтолкнуть их к массиву?

Question

Это домашнее задание.Мне нужно создать круги на холсте HTML5, чтобы при каждом щелчке создавался круг случайного цвета.Центр круга - это место, где была нажата мышь.Однако, если новый ящик с кружками перекрывает любые другие уже нарисованные круги, эти круги исчезают, пока остается новый круг.Эта логика с перекрытием, я думаю, я справлюсь.У меня проблема в том, чтобы отслеживать все круги, нарисованные на холсте?

(function(doc) {
  var canvas = doc.getElementById("testCanvas");
  var context = canvas.getContext("2d");

  // Click event handler
  canvas.onclick = function(e) {
    // Creating array for circles
    var circles = [];

    // Creating a circle with random color and a given radius at the mouse click
    var nextColor = randomColor();
    context.fillStyle = nextColor;
    context.beginPath();
    context.arc(e.clientX, e.clientY, 30, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // Creating circle object
    var circle = {
      x_coord: e.clientX,
      y_coord: e.clientY,
      color: nextColor,
      visible: true
    };

    // Pushing circle object into the array of circles
    circles.push(circle);

    //document.getElementById("demo").innerHTML = circles;
    console.log(circles);
  };
})(document);

<canvas id="testCanvas" />

Answer 1

Единственная реальная проблема, с которой я столкнулся в вашем коде, заключается в том, что вы инициализируете массив внутри обработчика щелчков.Это означает, что максимальный размер массива окружностей будет равен единице, поскольку при каждом щелчке он инициализируется повторно.

Вместо этого инициализируйте массив окружностей один раз, переместив следующий текст за пределы обработчика щелчка.

var circles = [];

Пример:

(function (doc) {
  var canvas = doc.getElementById("testCanvas");
  var context = canvas.getContext("2d");

  // Creating array for circles 
  var circles = [];

  // Click event handler
  canvas.onclick = function (e) {

    // Creating a circle with random color and a given radius at the mouse click
    var nextColor = "black";
    context.fillStyle = nextColor;
    context.beginPath();
    context.arc(e.clientX, e.clientY, 30, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // Creating circle object
    var circle = {
      x_coord: e.clientX, y_coord: e.clientY, color:
        nextColor, visible: true
    };

    // Pushing circle object into the array of circles
    circles.push(circle);

    console.log(circles);
  }

})(document);

canvas {
 width: 100vw;
 height: 100vh;
}

<canvas id="testCanvas" />