Fabric.js provides four primary methods for straightening elements (rotating them to 0°, 90°, 180°, or 270° based on proximity):

Core Methods

1. canvas.straightenObject(obj) - Immediate straightening
2. obj.straighten() - Requires manual canvas refresh
3. canvas.fxStraightenObject(obj) - Animated straightening
4. obj.fxStraighten(options) - Animated with callbacks

Basic Implemantation

<button id="straightenBtn">Straighten Element</button>
<canvas id="canvas" width="400" height="400"></canvas>

<script>
  const canvas = new fabric.Canvas('canvas');
  const shape = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80,
    height: 100,
    fill: 'blue',
    angle: 30
  });
  
  canvas.add(shape);
  
  document.getElementById('straightenBtn').onclick = () => {
    canvas.fxStraightenObject(shape); // Animated version
  };
</script>

Key Considerations

• Methods without fx prefix execute immediately
• Object-level methods require manual canvas refresh
• Animation callbacks can be used for complex scenarios

Performance Optimization

For multiple elements:

function alignAll() {
  canvas.getObjects().forEach(obj => {
    obj.straighten();
  });
  canvas.renderAll();
}

For animated multiple elements:

function animateAll() {
  canvas.getObjects().forEach(obj => {
    obj.fxStraighten();
  });
  
  function render() {
    canvas.renderAll();
    requestAnimationFrame(render);
  }
  render();
}