определить конкретный c объект на html холсте из нескольких объектов, таких как прямоугольник, с помощью fabri c. js

Question

У меня есть массив прямоугольников, который я создал с помощью fabri c. js.

Затем я нарисовал все прямоугольники на холсте. Когда я перетаскиваю или изменяю размер этих объектов, как определить, какой прямоугольник перемещается или изменяется. есть ли способ связать идентификатор с каждым прямоугольником? Мой код выглядит так:

    <canvas id="mycanvas" width="1000" height="600"></canvas>
    <script>

      var button = document.querySelector("button");

      function load() {
        var canvas = new fabric.Canvas("mycanvas");
        canvas.setWidth(innerWidth);
        canvas.setHeight(innerHeight);
        ctx = canvas.getContext("2d");

        var rectarray = [];
        for (var i = 0; i < 4; i++) {
          rectarray[i] = new fabric.Rect({
            width: 100,
            height: 100,
            left: 10,
            top: 10,
            fill: "yellow",
          });
        }

        function objectAddedListener(ev) {
          let target = ev.target;
          console.log(
            "left",
            target.left,
            "top",
            target.top,
            "width",
            target.width,
            "height",
            target.height
          );
        }

        function objectMovedListener(ev) {
          let target = ev.target;
          console.log(
            "left",
            target.left,
            "top",
            target.top,
            "width",
            target.width * target.scaleX,
            "height",
            target.height * target.scaleY
          );
        }

        canvas.on("object:added", objectAddedListener);
        canvas.on("object:modified", objectMovedListener);

        for (i = 0; i < 4; i++) {
          canvas.add(rectarray[i]);
        }
      }

      load();
      button.addEventListener("click", load, false);
    </script>