JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<canvas id="paper" width="500" height="300">

JavaScript

var canvas = new fabric.Canvas('paper',{
	isDrawingMode: false
});

var rect = new fabric.Writebox({ width:200, height:100, side:'left' });
canvas.add(rect).setActiveObject(rect).renderAll();


fabric.Writebox = fabric.util.createClass(fabric.Rect, {

  /**
   * Side of rounding corners
   * @type String
   * @default
   */
  type: 'writebox',
  side: 'left',
  
	initialize: function(options) {
        this.callSuper('initialize', options);
        options && this.set('width', options.width);
        options && this.set('height', options.height || '');
    },
    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            height: this.height,
            width: this.width,
        });
    },
  _render: function(ctx, noTransform) {

      if (this.width === 1 && this.height === 1) {
        ctx.fillRect(0, 0, 1, 1);
        return;
      }

      var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
          ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
          w = this.width,
          h = this.height,
          x = noTransform ? this.left : -this.width / 2,
          y = noTransform ? this.top : -this.height / 2,
          isRoundedLeft = (rx !== 0 || ry !== 0) && side === 'left',
          isRoundedRight = (rx !== 0 || ry !== 0) && side === 'right',
          k = 1 - 0.5522847498 

      ctx.beginPath();

      ctx.moveTo(x + (isRoundedLeft ? rx : 0), y);
      ctx.lineTo(x + w - (isRoundedRight ? rx : 0), y);
      isRoundedRight && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
      ctx.lineTo(x + w, y + h - (isRoundedRight ? ry : 0));
      isRoundedRight && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
      ctx.lineTo(x + (isRoundedLeft ? rx : 0), y + h);
      isRoundedLeft && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
      ctx.lineTo(x, y + (isRoundedLeft ? ry : 0));
      isRoundedLeft &&...