JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<br> 
<canvas id="c" width="400" height="400"></canvas>
<br>

CSS

#c {
  background-color: grey;
  margin-top: 10px;
}

JavaScript

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
        left: 50,
        top: 50,
        fill:  "#555555",
        stroke: "#000",
        width: 100,
        height: 100   
    });
    
    canvas.add(rect);
    
 canvas.on('object:modified', function(e) {
 	applyPaddingIfNeeded(e.target);
 });
    
 function applyPaddingIfNeeded(obj) {
    var maxDim = Math.max(obj.get('width') * obj.get('scaleX'), obj.get('height') * obj.get('scaleY'));
    var padding = 0;
    if(maxDim < 50) {
      padding = 10;
    }
    else if (maxDim >= 50 && maxDim < 75) padding = 5;
    if(padding != obj.padding) obj.set('padding', padding).setCoords();
}