Fabricjs overlay

by Steve Eberhardt

HTML

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<html>
  <head></head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <button id="clip">clip</button>
    <button id="center">center</button>
    <button id="left">left</button>
    <button id="right">right</button>
    <button id="top">top</button>
    <button id="bottom">bottom</button>
    <button id="horizontally">horizontally</button>
    <button id="vertically">vertically</button>
  </body>
</html>

CSS

.canvas-container {
  background-color: #000;
}

JavaScript

fabric.Object.prototype.originX = "center";
fabric.Object.prototype.originY = "center";

const canvas = new fabric.Canvas('canvas', {
	backgroundColor: "#fff"
});

const zoom = 0.5;
let clip = false;

canvas.zoomToPoint({x: canvas.width / 2, y: canvas.height / 2}, zoom);

canvas.on("after:render", (e) => {
  const { ctx } = e;
  
  let fillStyle = clip ? "rgba(0, 0, 0, 1)" : "rgba(0, 0, 0, 0.25)";
  
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(canvas.width, 0);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.lineTo(0, 0);
  ctx.transform.apply(ctx, Array.from(canvas.viewportTransform));
  ctx.moveTo(0, 0);
  ctx.lineTo(0, canvas.height);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(canvas.width, 0);
  ctx.closePath();
  ctx.fillStyle = fillStyle;
  ctx.fill();
  ctx.restore();
})

const group = new fabric.Group([
  new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
  new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
  new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
  new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
]);
 
canvas.add(group);
canvas.add(new fabric.Textbox('test'));

document.querySelector("#clip").addEventListener("click", () => {
	clip = !clip;
  canvas.requestRenderAll();
});

document.querySelector("#center").addEventListener("click", () => {
	canvas.getActiveObject().set({left: canvas.width / 2, top: canvas.height / 2});
  canvas.getActiveObject().setCoords();
  canvas.requestRenderAll();
});

document.querySelector("#left").addEventListener("click", () => {
	const objectBounds = canvas.getActiveObject().getBoundingRect(true, true)
	canvas.getActiveObject().set("left", objectBounds.width / 2);
  canvas.getActiveObject().setCoords();
  canvas.requestRenderAll();
});

document.querySelector("#right").addEventListener("click", () => {
	const objectBounds =...