Drawing lines with a mouse

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="position:relative; border:1px solid #ccc">
  
 
</canvas>
 <div onmouseover='stopFnc()'  class='stop' >
    <b style='color:black'>ANB</b>
    <br>
    <b id='next'></b>
  </div>

CSS

.stop{
  position:absolute;
  top:200px;
  left:100px;
}

JavaScript

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

var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    fillText: 'aNd',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});


function stopFnc() {
  isDown = false;
  var x = document.getElementById('next');
  x.innerHTML = 'abat';
  
}