Как соединить начальную и конечную точки многоугольника в angular с помощью fabri c js?

Question

Я хочу объединить начальную и конечную точки многоугольника в angular с помощью библиотеки fabric.js, чтобы я мог получить одинаковые координаты начальной или конечной точки.

Когда я присоединяюсь к начальной и конечной точкам точки вместе, я получаю разные координаты. Есть ли способ, которым, когда я нажимаю кнопку сохранения, чтобы сохранить многоугольник, он автоматически присоединяется.

* компонент. html файл

    <canvas id="canvas" width="800px" height="450"></canvas>
    <button> <a class="btn btn-success tab-btn" id="polygon" 
    (click)="polygon()">Polygon</a></button> 
     <button> <a class="btn btn-success tab-btn" id="save" 
    (click)="save()">Save</a></button> 

* файл component.ts

    polygonPointArray = [] ;
    polygonLineArray = [];
   pointsCoordinate = [];
   lineCoordinate = [];
    polygonLine: any;
    polygon(){
     this.canvas.on("mouse:down", (event)=> {
     var polygonPointer = this.canvas.getPointer(event.e);
     var positionX = polygonPointer.x;
     var positionY = polygonPointer.y;
        // Add small circle as an indicative point
     var polygonPoint = new fabric.Circle({
     radius: 5,
     fill: "red",
     left: positionX,
     top: positionY,
     selectable: false,
     originX: "center",
     originY: "center",
     hoverCursor: "auto"
     });
      this.canvas.add(polygonPoint);
     // Store the points
   this.polygonPointArray.push(polygonPoint);
   console.log(this.polygonPointArray);
   if (this.polygonPointArray.length > 1) {
        var startPoint = this.polygonPointArray[this.polygonPointArray.length - 2];
    var endPoint = this.polygonPointArray[this.polygonPointArray.length - 1];
    this.polygonLine = new fabric.Line(
    [
      startPoint.get("left"),
      startPoint.get("top"),
      endPoint.get("left"),
      endPoint.get("top")
    ],
    {
      stroke: "orange",
      strokeWidth: 4,
      hasControls: false,
      hasBorders: false,
      selectable: false,
      lockMovementX: true,
      lockMovementY: true,
      hoverCursor: "default",
      originX: "center",
      originY: "center"
    }
  );
    this.polygonLineArray.push(this.polygonLine);
   this.canvas.add(this.polygonLine);
 }
    });
      this.canvas.renderAll();
   }
 save(){
 //  for saving polygon
   this.polygonPointArray.forEach((pt)=> {
    this.canvas.remove(pt);
    console.log(pt)
    this.pointsCoordinate.push(pt)
    console.log(this.pointsCoordinate)
    });
   this.polygonPointArray = [];
  this.polygonLineArray.forEach((line)=> {
   console.log(typeof(line));
  this.lineCoordinate.push(line);
  console.log(this.lineCoordinate)
   });
   this.polygonLineArray = [];
    }