JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.js"></script>
<div>
<canvas id="c" width=300 height=300></canvas>
</div>

CSS

* {
  touch-action: none;
}
canvas {
  border: solid;
}

JavaScript

// lock-related properties, for use in fabric.Group#get
  // to enable locking behavior on group
  // when one of its objects has lock-related properties set
  var _lockProperties = {
    lockMovementX:  true,
    lockMovementY:  true,
    lockRotation:   true,
    lockScalingX:   true,
    lockScalingY:   true,
    lockUniScaling: true
};
fabric.util.object.extend(fabric.Group.prototype, {
/**
     * Returns requested property
     * @param {String} prop Property to get
     * @return {*}
     */
    get: function(prop) {
      if (prop in _lockProperties) {
        if (this.hasOwnProperty(prop)) {
          return this[prop];
        }
        else {
          for (var i = 0, len = this._objects.length; i < len; i++) {
            if (this._objects[i][prop]) {
              return true;
            }
          }
          return false;
        }
      }
      else {
        if (prop in this.delegatedProperties) {
          return this._objects[0] && this._objects[0].get(prop);
        }
        return this[prop];
      }
    }
});    
    
var canvas = new fabric.Canvas('c');


var rect, circle, group;

// Wrong
rect = new fabric.Rect({
  fill: "blue", width: 40, height: 40
});
circle = new fabric.Circle({
  radius: 10, fill: "red",
  lockMovementX: true,
  lockMovementY: true
});
group = new fabric.Group([rect, circle], {
  lockMovementX: false,
  lockMovementY: false
});
canvas.add(group);


// Correct
rect = new fabric.Rect({
  fill: "red", width: 40, height: 40
});
circle = new fabric.Circle({
  radius: 10, fill: "white"
});
group = new fabric.Group([rect, circle], {
  left: 50,
  lockMovementX: true,
  lockMovementY: true
});
canvas.add(group);

// Correct
rect = new fabric.Rect({
  fill: "yellow", width: 40, height: 40
});
circle = new fabric.Circle({
  radius: 10, fill: "white",
  lockMovementX: true,
  lockMovementY: true
});
group = new fabric.Group([rect, circle], {
  left: 100
});
canvas.add(group);