JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid gray"></canvas>

JavaScript

var canvas = new fabric.Canvas("canvas");
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 250,
  height: 250,
  fill: 'red',
  hasControls: true
});
canvas.add (rect);
canvas.renderAll();


isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
			// overriding _drawControl method
			fabric.util.object.extend(fabric.Object.prototype, {
				hasRotatingPoint: true,
				cornerSize: 25,
        selectedIconImage: new Image(),
        iconSrc: 'https://static.thenounproject.com/png/8337-200.png',
        isLoaded: false,
				_drawControl: function(control, ctx, methodName, left, top) {
				    if (!this.isControlVisible(control)) {
				        return;
				    }
				    var size = this.cornerSize;
				    isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);

				    if(control !== 'mtr')
				        ctx['fillRect'](left, top, size, size);
				    if(control === 'mtr') {
                if (this.isLoaded) {
                  ctx.drawImage(this.selectedIconImage, left, top, size, size);
                } else {
                  var self = this;
                  this.selectedIconImage.onload = function() {
                    self.isLoaded = true;
										ctx.drawImage(self.selectedIconImage, left, top, size, size);
                  }
                  this.selectedIconImage.src = this.iconSrc;
                } 
				    }
			  	}
			});