When creating objects in Fabric.js, the default scaling origin point is positioned at the opposite corner of the element's control points. This behavior may not always align with your requirements.

Holding the alt key during a scaling operation shifts the origin to the element's center. However, you can configure the default behavior so that all scaling operations use the center as the origin point.

Setting the centeredScaling property to true enables center-based scaling for objects.

Configuring Centered Scaling

This configuration can be applied in two different scopes: globally across the canvas or for individual elements.

First, set up a canvas with two objects—a rectangle and a circle—to demonstrate the behavior.

<canvas id="canvasContainer" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  const canvas = new fabric.Canvas('canvasContainer');

  const box = new fabric.Rect({
    width: 100,
    height: 60,
    left: 100,
    top: 100,
    fill: 'pink'
  });
  canvas.add(box);

  const ring = new fabric.Circle({
    radius: 50,
    left: 300,
    top: 80,
    fill: 'green'
  });
  canvas.add(ring);
</script>

Global Configuration

Applying centeredScaling at the canvas level affects all objects within that canvas.

const canvas = new fabric.Canvas('canvasContainer', {
  centeredScaling: true
});

// Alternative approach
const canvas = new fabric.Canvas('canvasContainer');
canvas.centeredScaling = true;

With this setting, both the circle and rectangle scale from their center points, regardless of which corner of the bounding box is being dragged.

Element-Level Configuration

To apply center-based scaling to specific objects only, set the property on individual Fabric.js objects.

const box = new fabric.Rect({
  width: 100,
  height: 60,
  left: 100,
  top: 100,
  fill: 'pink',
  centeredScaling: true
});
canvas.add(box);

In this configurasion, only the rectangle scales from its center. The circle retains the default corner-based scaling behavior.

You can also asign the property after object creation:

const box = new fabric.Rect({
  width: 100,
  height: 60,
  left: 100,
  top: 100,
  fill: 'pink'
});

box.centeredScaling = true;
canvas.add(box);