JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<body>
<canvas id="c"></canvas>
</body>

CSS

body { background: red; padding: 20px; }
canvas { border: 1px solid white; }

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas(
	'c',
    {
        enableRetinaScaling: false,
        selectionLineWidth: 8,
        perPixelTargetFind: true,
        selection: true,
        preserveObjectStacking: true,
    }
);


canvas.renderAll();

// Set object default properties.
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.snapAngle = 5;
fabric.Object.prototype.cornerStyle = 'circle';
fabric.Object.prototype.padding = 5;
fabric.Object.prototype.cornerSize = 20;


// create a rectangle object
var rect = new fabric.Rect(
  {
      left: 50,
      top: 50,
      fill: 'blue',
      width: 50,
      height: 50
  }
);


// "add" rectangle onto canvas
canvas.add(rect);


// Deselect everything on the canvas.
		canvas.discardActiveObject();

		canvas.selection = true;

		// Enable/ Disable all the current objects.
		canvas.forEachObject(
			( o ) => {
				o.set(
					{
						selectable: enable,
						evented: enable,
					}
				);
			}
		);