draw line with fabricjs and d3

just playing with fabricjs... and d3 ... assisted by svg-points

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/fabric@2.0.0-rc.1/dist/fabric.js"></script>
  <script src="https://unpkg.com/svg-points@6.0.0/dist/svg-points.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <p>click on the line to see the interactivity</p>
  <canvas id="c" width="300" height="300" style="width: 300px; height: 300px; touch-action: none; user-select: none;"></canvas>
  <script>
    var canvas = new fabric.Canvas('c', {
      backgroundColor: '#eae5ff',
      selectionColor: 'blue',
      selectionLineWidth: 2
      // ...
    });
    
    var points = SVGPoints.toPoints({
      type:'path',
      d:d3.line().curve(d3.curveBasis)([
        [20,10],
        [50,80],
        [120,50],
        [200,100]
      ])
    })
    
    var poly = new fabric.Polyline(
      points,
      {
        stroke: '#7c7c7c',
        fill: 'none',
        backgroundColor: '#eae5ff',
        left: 100,
        top: 100
      }
    );

canvas.add(poly); // add object
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/fabric@2.0.0-rc.1/dist/fabric.js

https://unpkg.com/svg-points@6.0.0/dist/svg-points.js