Search code examples
fabricjs

How to disable selection freedrawing fabricjs


After you draw something with FreeDrawing in FabricJs, you are able to select what was drawn and move it. Is there a way to disable this selection?


Solution

  • In case you don't need any interactivity on your canvas, you can use StaticCanvas

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

    Or, in case you want to disable selection only for specific objects, i.e. the last brush stroke, you can try calling the following code every time the stroke is created:

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

    If you need interactivity for other objects, you can also define this right after canvas initialization

    fabric.Object.prototype.selectable = false;
    

    all new objects will be non-selectable, 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);