Draw a polygon freely using Fabric.js

Question

I’m using this code to try to draw a polygon freely: http://jsfiddle.net/e5Xth/3/

canvas.on('mouse:move', function (options) {
        if (lines[0] !== null && drawingObject.type == "roof") {
            setStartingPoint(options);
            lines[lineCounter - 1].set({
                x2: x,
                y2: y
            });
            canvas.renderAll();
        }
    });

My problem is, when I use this code on my page, it doesn’t draw correctly. When I begin to draw the polygon the lines do not appear in the place where I asked them to draw but always from the upper left field. when I click to get the polygon it is drawn in the correct location.

Answer 1

How the script works

The script consists of an editor that allows you to draw and work with geometric shapes. To do this, click on the label "Pressto Draw! And to stop, "then click on a few points inside the drawing rectangle and again on the label above. The clicked points will be closed in a polygon filled with the color purple.

^{I added the explanation why it might not be intuitive at first glance.}

The problem

From what I understand, the problem occurs when drawing a second form, because it seems to interfere in the first drawn. The same would occur with subsequent forms.

The cause

The cause is the infamous global variables (roofPoints, lines and lineCounter).

Since they are not redefined after drawing one of the forms, the following form will include the points of the previous form. (I did not analyze all the impacts that occurred).

The solution

I took the liberty of making one Fork fiddle and apply some very simple adjustments.

The main adjustment was to restart the variables mentioned at the beginning of the drawing in a way. See the excerpt:

$("#btnRoof").click(function () {
    if (drawingObject.type == "roof") {
        drawingObject.type = "";
        canvas.remove(lines[lineCounter - 1]);
        var roof = makeRoof(roofPoints);
        canvas.add(roof);
        canvas.renderAll();
    } else {
        drawingObject.type = "roof"; // roof type
        roofPoints = [];
        lines = [];
        lineCounter = 0;            
    }
});

Completion

Avoid working with global variables as much as possible to avoid falling into this type of problem. Always use the minimum scope for variables.

For example, look at the variable roof in modified fiddle. It is declared locally as there was no need for it to be global.

I know that at some point it is important to share the variables between the various events, but try to do this by encapsulating the variables in an object that can be easily restarted.

Anyway, my intention is not to criticize, because it is certainly possible to adjust the script without difficulties. Only if the idea is to include more features and make it more complex, encapsulation will make a huge difference so it doesn’t get to the point where any maintenance makes it stop working.