JSFiddle - React, Tailwind, and code Playground

by johndubya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="canvas" style="height: 250px; width: 300px;"></canvas>
<div style="display: inline-block;">
  Top: <input type="text" id="top" style="width: 50px;">
</div>
<div style="display: inline-block;">
  Left: <input type="text" id="left" style="width: 50px;">
</div>
<div style="display: inline-block;">
  Scale: <input type="text" id="scale" style="width: 50px;">%
</div>
<div>
  <button type="button" id="vcenter">Center Vertically</button>
  <button type="button" id="hcenter">Center Horizontally</button>
</div>

JavaScript

//fabric.Object.NUM_FRACTION_DIGITS = 0;
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundColor("#ff0000");
canvas.setDimensions({ width: 300, height: 250 });

canvas.on('selection:created', function (e) {
	updateValues(e.selected[0]);
});
canvas.on('selection:updated', function (e) {
	updateValues(e.selected[0]);
});
canvas.on('object:modified', function (e) {
	updateValues(e.target);
});

function updateValues(obj) {
  document.getElementById("top").value = obj.top;
  document.getElementById("left").value = obj.left;
  document.getElementById("scale").value = obj.scaleX * 100;
}

fabric.Image.fromURL("https://via.placeholder.com/200x150", function (oImg) {
  //this function is called async
  var opts = {
    crossOrigin: "anonymous",
    left: 10,
    top: 10
  };
  oImg.set(opts);
  canvas.add(oImg);
});

document.getElementById('vcenter').addEventListener('click', function () {
	var obj = canvas.getActiveObject();
  obj.centerV();
	updateValues(obj);
});

document.getElementById('hcenter').addEventListener('click', function () {
	var obj = canvas.getActiveObject();
  obj.centerH();
	updateValues(obj);
});

document.getElementById('top').addEventListener('change', function () {
	var obj = canvas.getActiveObject();
  obj.set({ top: document.getElementById('top').value });
  canvas.renderAll();
});