How do you prevent an item being selected in FabricJS

1.38K viewsSoftware & TechnologyfabricJS javascript

I have a canvas window and there is an element that i want to programmatically add to it. If a user adds a background image, i want to be able to toggle a semi transparent overlay that makes the text above stand out more clearer and is the main focus instead of it being the image. I have gotten this to work but the problem is that the user can easily click on the overlay (which is just a rectangle) and move it. Is there a way to make is so that this rectangle or any object with fabricJS is completely disabled to the end users mouse and can only be controlled with JS code?

Edited question

There are a few ways to make it work. I got it working before and turns out that a select all invalidates it. It was a bit tricky to make it so that you could not select a single shape. The following code is what I used to make it work.


Changed status to publish