I have two object, a circle and a square with pattern inside on FabricJS canvas.

They're bound together using transformation so when the circle is scaling, rotating and moving the square is synced and do the same (using this tutorial).

bindObjects = (parent, child) => {
  var parentTransform = parent.calcTransformMatrix();
  var invertedParentTransform = fabric.util.invertTransform(parentTransform);
  var desiredTransform = fabric.util.multiplyTransformMatrices(invertedParentTransform, child.calcTransformMatrix());
  child.relationship = desiredTransform;
}

updateObjects = (parent, child) => {
  var newTransform = fabric.util.multiplyTransformMatrices( parent.calcTransformMatrix(), child.relationship);
  opt = fabric.util.qrDecompose(newTransform);
  child.set({
    flipX: false,
    flipY: false,
  });
  child.setPositionByOrigin(
    { x: opt.translateX, y: opt.translateY },
    'center',
    'center'
  );
  child.set(opt);
  child.setCoords();
}

// Main flow of canvas & objects creations

....

bindObjects(circle, square);

circle.on('moving', (e) => {
  updateObjects(circle, square);
})
circle.on('scaling', (e) => {
  updateObjects(circle, square);
})
circle.on('rotating', (e) => {
  updateObjects(circle, square);
})

Now i want to switch the binding, and bind the circle only with the pattern (that's inside the square) - so scaling, rotating and moving will only affect it.

All my try to switch between the square and the pattern, staticCanvas or the pattern image itself didn't work or throw an error of calcTransformMatrix not found in child object)

Is there a way to accomplish it?