const stage = new Konva.Stage({

  container: 'container',

  width: window.innerWidth,

  height: window.innerHeight

});

​

const layer = new Konva.Layer();

stage.add(layer);

​

const line = new Konva.Line({

  points: [50, 50, 250, 50],

  stroke: 'green'

});

layer.add(line);

​

const anchor1 = new Konva.Circle({

  x: line.points()[0],

  y: line.points()[1],

  radius: 10,

  fill: 'red',

  draggable: true

})

layer.add(anchor1);

​

const anchor2 = new Konva.Circle({

  x: line.points()[2],

  y: line.points()[3],

  radius: 10,

  fill: 'red',

  draggable: true

})

layer.add(anchor2);

​

​

function updateLine() {

  const points = [

    anchor1.x(),

    anchor1.y(),

    anchor2.x(),

    anchor2.y(),

  ]

  line.points(points);

  layer.batchDraw();

}

​

anchor1.on('dragmove', updateLine);

anchor2.on('dragmove', updateLine);

​

layer.draw();

​

​

​