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>

CSS

#c {
    border: solid 1px red;
}

JavaScript

function DrawDriblingLine(x1, y1, x2, y2, interval, offset) {
    var startPoint = { x: x1, y:  y1 },
        endPoint = { x: x2, y: y2 },
        currentPoint = { x: startPoint.x, y: startPoint.y },
        dx = endPoint.x - startPoint.x,
        dy = endPoint.y - startPoint.y,
        a = (function () { if (dy !== 0) { return dx / dy; } else { return 0;}})(),
        b = startPoint.y - a * startPoint.x,
        y = function (x) { return a * x + b; };
    currentPoint.x = currentPoint.x + 1;
    currentPoint.y = y(currentPoint.x) + Math.sin(currentPoint.x * 0.1) * 10;   
    
    var points = [];
    
    var canvas = window.__canvas = new fabric.Canvas('c');
    var l1 = new fabric.Polyline(points, {
        stroke: 'black',
        left: length/3,
        top: 100,
        strokeWidth: 5,
        strokeLineJoin: 'round'
    },false);
    canvas.add(l1);

    canvas.renderAll();
}

DrawDriblingLine(100, 100, 300, 250, 5, 4);