NASA Working SnapLine

by santy_naren

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div>
  <div id="chartContainer" style="height: 800px; width: 400px;"></div>
  <canvas id="userCanvas" height="800px" width="400px"></canvas>
</div>

CSS

#chartContainer {
  position: absolute;
}

#userCanvas {
 
}

JavaScript

var c = document.getElementById("chartContainer");
var canvas1 =document.getElementById("userCanvas");
canvas1.addEventListener("keyup", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    // Cancel the default action, if needed
  alert("Fasdfasdfadsfasdf");
  }
});
var chart;
var ctx;

var k = 0;
var tot = 0;
var xxx = true;

var size = document.getElementById('size');
var align = document.getElementById('align');
var padding = document.getElementById('padding');

chart = new CanvasJS.Chart("chartContainer", {

  theme: "light2",
  title: {
    text: "Draw Line on Chart based on Mouse Events"
  },
  data: [{
    type: "scatter",
    dataPoints: [{
        x: 10,
        y: 71
      },
      {
        x: 20,
        y: 55
      },
      {
        x: 30,
        y: 50
      },
      {
        x: 40,
        y: 65
      },
      {
        x: 50,
        y: 95
      },
      {
        x: 60,
        y: 68
      },
      {
        x: 70,
        y: 28
      },
      {
        x: 80,
        y: 34
      },
      {
        x: 90,
        y: 14
      }
    ]
  }]
});

chart.render();

// drawdefinedLine(chart,file.get("total"));
var canvas = new fabric.Canvas('userCanvas', { selection: false });

var line, isDown ,x2,y2;

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

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

canvas.on('mouse:up', function(o){
  isDown = false;
  circle = new fabric.Circle({
    left:x2,
    top: y2,
    radius: 5,
    strokeWidth:...