How to allow resizing while keeping aspect ratio in all cases?
17:42 12 Feb 2025

I have a fabricImage and I want to allow resizing while keeping the aspect ratio intact.

By default, Fabric.js allows resizing from:

  • Corners, which scales both x and y proportionally (this works as expected).
  • Edges (left, right, top, bottom), which scales only x or y, breaking the aspect ratio.

I tried setting lockScalingX = true and lockScalingY = true, but this completely prevents scaling, including corner scaling. Desired Behavior:

  • Allow resizing from corners while maintaining the aspect ratio.
  • Allow resizing from edges, but force uniform scaling so that dragging an edge scales both x and y equally. (or disable border scaling, both ok)
  • Prevent aspect ratio from being broken when resizing from edges.

What I’ve tried:

  • Setting lockScalingX = true and lockScalingY = true (prevents all scaling).
  • Searching the documentation but haven't found a clear way to enforce aspect ratio for all resize handles.

How can I achieve this? Any help would be greatly appreciated!

javascript fabricjs