lib.canvas.__eventListeners = {};
line = false;

lib.canvas.on('mouse:down', e=>{
    if (!e.e.ctrlKey)
        return;

    line = new fabric.Line([e.pointer.x, e.pointer.y, e.pointer.x, e.pointer.y],{
        left: e.pointer.x,
        top: e.pointer.y,
        stroke: '#f00',
        selectable: false,
        evented: false,
        name: 'newLine'
    });

    lib.canvas.add(line);
    lib.canvas.renderAll();
}
);

lib.canvas.on('mouse:move', e=>{
    if (line) {
        line.set({
            x2: e.pointer.x,
            y2: e.pointer.y
        });
        lib.canvas.renderAll();
    }
}
);

$(window).unbind('keyup');
$(window).on('keyup', e=>{
    console.log(e.keyCode);
    if (e.keyCode == 13) {
        const firstLine = lib.canvas.getObjects().find(l=>l.name == 'newLine');
        const lines = lib.canvas.getObjects().filter(obj=>obj.name == 'newLine');
        if (!firstLine || lines.length < 3) {
            return;
        }

        line.set({
            x2: firstLine.x1,
            y2: firstLine.y1
        });
        lib.canvas.renderAll();
        line = null;
        const polygon = new fabric.Polygon(lines.map(line=>({
            x: line.x1,
            y: line.y1
        })), {
            originX: 'left',
            originY: 'top',
            fill: 'rgba(0, 0, 0, .4)',
            stroke: '#f00', strokeWidth: 1,
           //absolutePositioned: true
        });

        lib.canvas.add(polygon);
        //polygon.set({ left: polygon.left - 100, top: polygon.top - 100 });
        //lib.canvas.getObjects()[0].clipPath = polygon;

        lib.canvas.getObjects().forEach(obj=>{
            if (obj.name == 'newLine') {
                lib.canvas.remove(obj);
            }
        }
        );
        lib.canvas.renderAll();
    }
}
);