fabric.js polyline wavy line

by InferOn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c" height="400" width="400"></canvas>

JavaScript

function _drawDribblingLine() {
    var x1, x2, y1, y2;
    
    x1 = 100;
    y1 = 100;
    x2 = 400;
    y2 = 400;

    var width = (x1 - x2 > 0) ? x1 - x2 : x2 - x1;
    var height = (y1 - y2 > 0) ? y1 - y2 : y2 - y1;
    var left = ((x1 - x2 > 0) ? x1 : x2) - (width / 2);
    var top = ((y1 - y2 > 0) ? y1 : y2) - (height / 2);
    var xx2 = (x1 + x2) / 2;
    var yy2 = (y1 + y2) / 2;
    var xx3 = (x1 + x2) / 3;
    var yy3 = (y1 + y2) / 3;

    
    var length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    var interval = 5, offset = 4;
    var points = [];
    
    for (var i = 0; i * interval * 4 < length; i++) {
        var p = {};
        if(i > 0)
            p = {
                x:(x1 + x2) / i,
                y:(y1 + y2) / i,
            };
        else
            p = {
                x:(x1 + x2),
                y:(y1 + y2),
            }
        
         
        points.push(p);    
    }
    /*
    for (var i = 0; i * interval * 4 < length; i++) {
      points[j++] = {
        x: x1 + (i * interval * 4) + 5,
        y: y1 - offset
      };
      points[j++] = {
        x: x1 + (i * interval * 4) + 15,
        y: y1 + offset
      };
    }
    
var canvas = window.__canvas = new fabric.Canvas('c');
    var l1 = new fabric.Polyline(points, {
      stroke: 'black',
      'originX': 'left',
      'originY': 'top',
      top: y1,
      left: x1,
      strokeWidth: 5,
      strokeLineJoin: 'round'
    }, false);
    
    l1.set('selectable', false);
    l1.set('borderColor', 'transparent');
    
    
    canvas.add(l1);

    canvas.renderAll();
    
  }

_drawDribblingLine();