JSFiddle - React, Tailwind, and code Playground

by try hendri

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

JavaScript

var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Rect({
  width: 100,
  height: 100,
  left: 50,
  top: 100,
  fill: 'green'
}));

canvas.on('object:selected', function (e) {
        e.target.transparentCorners = false;
        e.target.borderColor = '#cccccc';
        e.target.cornerColor = '#0CB7F0';
        e.target.minScaleLimit = 2;
        e.target.cornerStrokeColor = '#0CB7F0';
        e.target.cornerStyle = 'circle';
        e.target.minScaleLimit = 0;
        e.target.lockScalingFlip = true;
        e.target.padding = 5;
        e.target.selectionDashArray = [10, 5];
        e.target.borderDashArray = [10, 5];
        e.target.cornerDashArray = [10, 5];
    });

fabric.Object.prototype.drawControls = function (ctx) {

  if (!this.hasControls) {
    return this;
  }

  var wh = this._calculateCurrentDimensions(),
      width = wh.x,
      height = wh.y,
      scaleOffset = this.cornerSize,
      left = -(width + scaleOffset) / 2,
      top = -(height + scaleOffset) / 2,
      methodName = this.transparentCorners ? 'stroke' : 'fill';

  ctx.save();
  ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
  if (!this.transparentCorners) {
    ctx.strokeStyle = this.cornerStrokeColor;
  }
  this._setLineDash(ctx, this.cornerDashArray, null);

  // top-left
  this._drawControl('tl', ctx, methodName,
    left,
    top);

  // top-right
  this._drawControl('tr', ctx, methodName,
    left + width,
    top);

  // bottom-left
  this._drawControl('bl', ctx, methodName,
    left,
    top + height);

  // bottom-right
  this._drawControl('br', ctx, methodName,
    left + width,
    top + height);

  if (!this.get('lockUniScaling')) {

    // middle-top
    this._drawControl('mt', ctx, methodName,
      left + width / 2,
      top);

    // middle-bottom
    this._drawControl('mb', ctx, methodName,
      left + width / 2,
      top + height);

    // middle-right
    this._drawControl('mr', ctx, methodName,
      left + width,
      top + height / 2);

  ...