How to make objects in canvas unselectable?

javascript canvas fabricjs
Yevgen picture Yevgen · Jul 23, 2012 · Viewed 12.7k times · Source

I want to make all object in canvas unselectable. I've found selectable method but i didn't find the way to implement it to all objects.

Answer

Emerica picture Emerica · Apr 9, 2019

I was looking for an unmovable and uneditable Fabric Text and I finally found a solution combining several SO, hope I can save someone some time.

Using "selectable": false wasn't enough in my case : the text was still editable and the cursor was still the "movable cursor" (even if the object wasn't selectable).

I had to add "evented": false. Here is an example:

this.canvas.add(new fabric.Text("Hello world !", {
            "selectable": false,
            "evented": false
}));

You can play with different control options here : http://fabricjs.com/controls-customization

Related questions

How to select Fabric.js object programmatically

I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this: var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height: 50, fill: 'green', …

Read More
Fabric.js changes my canvas size to 300x150 after initialization

HTML: <div class="canvas-wrapper"> <canvas id="myCanvas"></canvas> </div> CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; height: 100%; width: 99%; } JS var myCanvas = new …

Read More
Let user delete a selected fabric js object

I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new …

Read More