Removing highlighting blue rectangle for selection in fabric js

Question

I am developing a Web application that involves some drawing feature. I am usign fabric js for canvas operation - http://fabricjs.com/. What I am now implementing a feature of drawing a line using the mouse.

In the mouse down event, I add a new line like this

var points = [pointer.x, pointer.y, pointer.x, pointer.y];
                temp_line = new fabric.Line(points, {
                    strokeWidth: 1,
                    stroke: '#ff0000',
                    selectable: false
                });
                $canvas.add(temp_line)

When the mouse is moving, I am updating the line according to the current pointer position like this

temp_line.set({ x2: pointer.x, y2: pointer.y });
                $canvas.renderAll()

But the problem is the highlighted rectangular blue area as below.

As you can see, the blue rectangle is also drawn while I am moving the mouse to set the end point of the line. How can I disable that blue selection? I set selectable to false as well. But it is not gone yet.

Answer 1

Use $canvas.selection = false while you are in line drawing mode.