border lines on polygon

Question

I am trying to draw lines around polygon, It should draw different colour of line from one point to the next, I am stuck on attaching line to the last point of polygon, There are also red circles which are being created successfully on polygon corners, Lines are being drawn when box is moved with mouse, using 'modified' event

JSFiddle here

The issue is here:

var lastPoint = (i=>polygon.points.length)?0:i+1;
var fromX = transformedPoints[lastPoint].x;
var fromY = transformedPoints[lastPoint].y;
  return new fabric.Line([p.x, p.y, 25, fromX],{

JS code

var canvas = new fabric.Canvas("c", {
  selection: false
});

var polygon = new fabric.Polygon([
  new fabric.Point(150, 50),
  new fabric.Point(250, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150)
]);

polygon.on("modified", function() {
  document.getElementById("p").innerHTML = JSON.stringify(this);
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points")
    .map(function(p) {
      return new fabric.Point(
        p.x - polygon.pathOffset.x,
        p.y - polygon.pathOffset.y);
    })
    .map(function(p) {
      return fabric.util.transformPoint(p, matrix);
    });
  var circles = transformedPoints.map(function(p) {
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  document.getElementById("l").innerHTML = JSON.stringify(transformedPoints);
  var colors = ['#E5097F', '#00A0E3', '#009846', '#FECC00', '#000', '#000', '#000'];
  var lines = transformedPoints.map(function(p, i) {
    document.getElementById("r").innerHTML = JSON.stringify(p);
    var lastPoint = (i => polygon.points.length) ? 0 : i + 1;
    var fromX = transformedPoints[lastPoint].x;
    var fromY = transformedPoints[lastPoint].y;
    document.getElementById("r").innerHTML = fromX + ' - > ' + fromY;
    return new fabric.Line([p.x, p.y, 25, fromX], {
      stroke: colors[i],
      strokeWidth: 10,
      hasBorders: false,
      strokeDashArray: [8, 13]
    });
  });
  side_a = new fabric.Line([150, 0, 50, 0], {
    stroke: "red",
    strokeWidth: 10,
    hasBorders: false
  });
  this.canvas.clear().add(this).add(side_a).add.apply(this.canvas, lines).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();

UPDATE:

I am able to generate those lines by providing static values, for demo. before 'modified' event happens I have included some lines where it should go:

side_a = new fabric.Line([250, 50, 150, 50], {
  stroke: "red",
  strokeWidth: 10,
  hasBorders: false
});
side_b = new fabric.Line([150, 150, 150, 50], {
  stroke: "green",
  strokeWidth: 10,
  hasBorders: false
});
side_c = new fabric.Line([250, 150, 250, 50], {
  stroke: "blue",
  strokeWidth: 10,
  hasBorders: false
});
side_d = new fabric.Line([150, 150, 260, 150], {
  stroke: "green",
  strokeWidth: 10,
  hasBorders: false
});
canvas.add(polygon).add(side_a).add(side_b).add(side_c).add(side_d).renderAll();

Now just need to figure out how to create those dynamically. new JSFIDDLE HERE

UPDATE: finally I was able to solve it by running in loop.

Answer 1

I was able to solve it using looping through the points and than generating lines:

var fromX = transformedPoints[i].x;
var fromY = transformedPoints[i].y;
return new fabric.Line([p.x, p.y , fromX, fromY], {
  stroke: colors[i],
  strokeWidth: 10,
  hasBorders: true,
  strokeDashArray: [20, 5]
});