Initialize the rendering environment by instantiating a Fabric canvas and applying a background reference to track transformation boundaries accurately.

<div id="viewport-controls">
  <button id="scale-up">Magnify</button>
  <button id="scale-down">Reduce</button>
</div>
<canvas id="workspace" width="800" height="600" style="border: 2px solid #333;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>

const editor = new fabric.Canvas('workspace');

fabric.Image.fromURL('./assets/grid-reference.png', function(refImage) {
  editor.setBackgroundImage(refImage);
  editor.renderAll();
});

Static Anchor Zooming

When the scaling origin is fixed to the top-left coordinate (0, 0), reading the current magnification factor and applying an incremental adjustment is sufficient. The getZoom() and setZoom() API methods handle this workflow.

function applyStepZoom(direction) {
  const baseScale = editor.getZoom();
  const stepValue = 0.15;
  const targetScale = direction === 'up' ? baseScale + stepValue : baseScale - stepValue;
  editor.setZoom(targetScale);
}

document.getElementById('scale-up').addEventListener('click', () => applyStepZoom('up'));
document.getElementById('scale-down').addEventListener('click', () => applyStepZoom('down'));

Cursor-Centered Interactive Zooming

Applications requiring intuitive navigation benefit from scaling relative to the pointer location. This approach intercepts scroll events, computes a modified magnification ratio using an exponential curve, and delegates the transformation to the canvas engine with precise coordinate mapping.

editor.on('mouse:wheel', function(scrollEvent) {
  const wheelDelta = scrollEvent.e.deltaY;
  let currentZoom = editor.getZoom();

  // Calculate exponential adjustment
  const adjustmentRate = Math.pow(0.996, wheelDelta);
  currentZoom *= adjustmentRate;

  // Clamp to valid range
  currentZoom = Math.max(0.05, Math.min(currentZoom, 10));

  // Execute transformation centered on cursor position
  editor.zoomToPoint(
    { x: scrollEvent.e.offsetX, y: scrollEvent.e.offsetY },
    currentZoom
  );
});