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 length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    var points = [];
    points[0] = {
        x: x1,
        y: y1
    };
    var j = 1;
    for (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
        };
    }
    points[j] = {
        x: x1 + length,
        y: y1
    };
    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);