Modify polyline

Question

If I want to add an extra line to an existing polyline, should I remove this existing polyline from the canvas first, modify the points matrix, and add the new polyline? Or is it possible to change the existing polyline, like changing the text of a text object?

Answer 1

You may remove whole polyline and add a new one or else you need to calculate the dimensions(left,top and pathoffset) and set it to polyline.

DEMO

var canvas = new fabric.Canvas('c');
var points = [];
var random = fabric.util.getRandomInt;
points.push(new fabric.Point(random(100,200),random(200,300)));
points.push(new fabric.Point(random(200,300),random(100,200)));
points.push(new fabric.Point(random(200,250),random(150,200)));

var polyLine = new fabric.Polyline(points, {
 stroke: 'black',
 fill: ''
});
canvas.add(polyLine);
setPolyCoords();

function addPoint(){
 polyLine.points.push(new fabric.Point(random(100,400),random(100,400)));
 setPolyCoords();
}

function setPolyCoords(){
 polyLine._calcDimensions();
 polyLine.set({
  top : polyLine.minY,
  left : polyLine.minX,
  pathOffset : {
        x: polyLine.minX + polyLine.width / 2,
        y: polyLine.minY + polyLine.height / 2
      }
 });
 polyLine.dirty = true;
 polyLine.setCoords();
 canvas.renderAll();
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick='addPoint()'>Add Point</button>
<canvas id="c" width="400" height="400"></canvas>