JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<body>
  <button onClick="rotate48Degrees()">Rotate 48&deg;</button>
  <button onClick="rotate54Degrees()">Rotate 54&deg;</button>
  <canvas style="height: 647px; width: 1616px;" id="canvas" />
</body>

JavaScript

const CANVAS_WIDTH = 1644;
const CANVAS_HEIGHT = 600;
const IMAGE_WIDTH = 960;
const IMAGE_HEIGHT = 300;

const canvasElem = document.getElementById("canvas");
const canvas = new fabric.Canvas(canvasElem);
canvas.setWidth(CANVAS_WIDTH);
canvas.setHeight(CANVAS_HEIGHT);

canvas.setBackgroundImage("https://cdn.pixabay.com/photo/2016/09/22/10/44/banner-1686943_960_720.jpg", () => {
  canvas.setZoom(1.7125); // Zoom required to fit image exactly
  canvas.viewportTransform[4] = 0;
  canvas.viewportTransform[5] = 43.125; // center image vertically
  canvas.add(
    new fabric.Rect({
      left: 0,
      top: 0,
      height: canvas.backgroundImage.height,
      width: canvas.backgroundImage.width,
      fill: "rgba(128, 128, 128, 0.5)",
    })
  );
});

function rotate48Degrees() {
  canvas.backgroundImage.set({
    originX: "center",
    originY: "center",
    angle: 48,
    left: 432.65441487386107,
    top: 457.07910718297796,
  });
  
  canvas.relativePan(new fabric.Point(81.07931452851288, -525.8729710508497));
  canvas.backgroundImage.setCoords();
  canvas.requestRenderAll();
}

function rotate54Degrees() {
  canvas.backgroundImage.set({
    originX: "center",
    originY: "center",
    angle: 54,
    left: 403.4894702566292,
    top: 476.4959451438458,
  });
  canvas.relativePan(new fabric.Point(252.9954899597492, -598.5398413723142));
  canvas.backgroundImage.setCoords();
  canvas.requestRenderAll();
}