JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<canvas id="c"></canvas>

JavaScript

var CustomRect = fabric.util.createClass(fabric.Rect, {

  type: 'labeledRect',

  initialize: function(options) {
    options || (options = { });
    const image = new Image(); 
    image.src = 'https://i.stack.imgur.com/CYp8Y.jpg'; 

    this.callSuper('initialize', options);
    
    image.onload = (function() {
        this.width = image.width;
        this.height = image.height;
        this.image_loaded = true;
      }).bind(this);
      
      
    this.set('label', options.label || '');
    this.set('image', image);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      label: this.get('label')
    });
  },

  _render: function(ctx) {
  
    if (this.image_loaded) {
        this.callSuper('_render', ctx);
        console.log(-this.width / 2, -this.height / 2);
        ctx.font = '20px Helvetica';
        ctx.fillStyle = '#333';
        ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
        ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
      }
  }
});


var canvas = new fabric.Canvas('c');
var rect = new CustomRect({});
canvas.add(rect);