Solution 1 :

On a canvas element, I would create an indicative circle point on each click and connect the dots whenever a new point is created.

var canvas = new fabric.Canvas("canvas");
var waterPipePoints = [];
var waterPipeLines = [];

canvas.on("mouse:down", function(event) {
    var pointer = canvas.getPointer(event.e);
    var positionX = pointer.x;
    var positionY = pointer.y;

    // Add small circle as an indicative point
    var circlePoint = new fabric.Circle({
        radius: 5,
        fill: "blue",
        left: positionX,
        top: positionY,
        selectable: false,
        originX: "center",
        originY: "center",
        hoverCursor: "auto"


    // Store the points to draw the lines
    if (waterPipePoints.length > 1) {
        // Just draw a line using the last two points, so we don't need to clear
        // and re-render all the lines
        var startPoint = waterPipePoints[waterPipePoints.length - 2];
        var endPoint = waterPipePoints[waterPipePoints.length - 1];

        var waterLine = new fabric.Line(
            stroke: "blue",
            strokeWidth: 4,
            hasControls: false,
            hasBorders: false,
            selectable: false,
            lockMovementX: true,
            lockMovementY: true,
            hoverCursor: "default",
            originX: "center",
            originY: "center"




Please check this example SandBox:

Problem :

I now have freedrawing with few different colors. I would like to free draw line parts instead of fully free draw. I need to mark water and gas lines on map with eg 6. lines that each starts on end of the last one.

function enableFreeDrawing() {
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.color =;

document.getElementById('colorpicker').addEventListener('click', function (e) {
    canvas.freeDrawingBrush.color =;
    canvas.freeDrawingBrush.width = 2;

Please suggest me how to draw lines from each point to another with eg. 6 clicks, and finish it with enter or doubleclick


Comment posted by Jammi

Can you provide a jsfiddle please ?

Comment posted by


Comment posted by Adam M.

Are you using version 1.7 to create this project? What is the version you are using?

Comment posted by Kacper Sitarz

I have one more question tho, how can i finish drawing line? I got select with different colors, water, gas, walls etc, each have different color, what i need to write on Select Change function to start drawing in new place?