JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

let canvas = new fabric.Canvas(document.getElementById("canvas"));

canvas.add(new fabric.Rect({ left: 77, top: 76, width: 100, height: 77, strokeWidth:0 }));
canvas.add(new fabric.Rect({ left: 77, top: 153, width: 100, height: 100,strokeWidth:0 }));

canvas.add(new fabric.IText('Fabricjs', {left: 0, top: 0, borderColor: 'red',
render: function(ctx) {
               this.clearContextTop();
              this.callSuper('render', ctx);
              this.cursorOffsetCache = { };
              this.renderCursorOrSelection();
              
              ctx.strokeStyle = this.fill;  
              let coords = this.calcCoords();
              ctx.beginPath();
              ctx.moveTo(coords.tl.x, coords.tl.y);
              ctx.lineTo(coords.tr.x, coords.tr.y);
              ctx.lineTo(coords.br.x, coords.br.y);
              ctx.lineTo(coords.bl.x, coords.bl.y);
              ctx.closePath();
              ctx.stroke(); 


            }
     }));

canvas.renderAll();