JSFiddle - React, Tailwind, and code Playground

by varun_1995

HTML

<canvas  id="canvas" style="border: 1px solid black"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 100,
height: 100,
  fill: '#eef',
  scaleY: 0.5
  
});
canvas.add(rect.scale(1));
rect.setCoords();

/*canvas.setActiveObject(rect);
function getCoords(oCoords) {
  return {
    tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y),
    tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y),
    bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y),
    br: new fabric.Point(oCoords.br.x, oCoords.br.y)
  }
}


canvas.on('mouse:move', function(e){
  console.log('over1',e.target)
  if(e.target && e.target !== canvas.getActiveObject())
    canvas.setActiveObject(e.target)
  var thisCoords = getCoords(canvas.getActiveObject().oCoords);
  alert("coords :"+thisCoords.t1);
 });*/