How to disable freedrawing fabricjs selection

Question

After you draw something using FreeDrawing in FabricJs, you can choose what was painted and move. Is there any way to disable this option?

Answer 1

If you do not need interactivity on your canvas, you can use StaticCanvas

var canvas = this.__canvas = new fabric.StaticCanvas('c');

Or, if you want to disable selection only for certain objects, i.e. last stroke of the brush, you can try calling the following code every time a stroke is created:

canvas.item(0).selectable = false;
canvas.renderAll();

---

If you need interactivity for other objects, you can also determine this immediately after initializing the canvas

fabric.Object.prototype.selectable = false;

all new objects will be unavailable unless you specify otherwise when you want to create a selectable object

var text = new fabric.Text('Honey,\nI\'m subtle', {
    fontSize: 250,
    left: 50,
    top: 0,
    selectable: true // make this object selectable
});
canvas.add(text);

Answer 2

, , : evented: false .

http://fabricjs.com/docs/fabric.Rect.html#evented

Answer 3

Selectable angles / borders and / or controls can also be disabled. Here is the complete code:

    var canvas = this.__canvas = new fabric.Canvas('c');    
    fabric.Object.prototype.transparentCorners = false;
    canvas.selection = false;
    fabric.Image.fromURL(src, function (img) {

        height = img.getBoundingRectHeight();
        width = img.getBoundingRectWidth();

        var oImg;
        oImg = img
            .set({ hasControls: false, hasBorders: false, selectable: false })
            .scale(factor);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
    }, { crossOrigin: 'anonymous' });