How do you prevent an item being selected in FabricJS

Asked By William Rossbach On

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?

1 Answer

Answered By Dan On

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.

var rect = new fabric.Rect({
  top: 0,
  left: 0,
  fill: 'rgba(0,0,0,0.8)',
  opacity: 0.6,
  lockMovementX: true,
  lockMovementY: true,
  lockRotation: true,
  lockUniScaling: true,
  lockScalingY: true,
  lockScalingX: true,
  selectable: false


Related Questions


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.