JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="200" height="250" style="border:dotted;background-color:#fff"></canvas>
<br>
<div id="log1">&nbsp;</div>

JavaScript

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 80,
  height: 50
});
                     
rect.hasRotatingPoint = true;
canvas.add(rect);

var log1 = document.getElementById('log1');
function log(message, where) {
    var Image_Width=canvas.item(0).width;
    var Image_Height=canvas.item(0).height;
    var Cavas_Width=canvas.width;
    var Cavas_Height=canvas.height;
    var Image_Left=canvas.item(0).left;
    var Image_Top=canvas.item(0).top;
    var Image_Scale_X=canvas.item(0).scaleX;
    var Image_Scale_Y=canvas.item(0).scaleY;
    var isleftfine=Image_Width*0.5*Image_Scale_X-Image_Left;
    var istopfine=Image_Height*0.5*Image_Scale_Y-Image_Top;
    var isbottomfine=Cavas_Height-(Image_Top+(Image_Height*0.5*Image_Scale_Y));
    var isrightfine=Cavas_Width-(Image_Left+(Image_Width*0.5*Image_Scale_X));
    
    if((isleftfine>0)&&(istopfine>0)&&(isrightfine<0)&&(isbottomfine<0)){
        var output="canvas is completely covered"; 
    }
    else{
        var output="canvas is not completely covered";
    }  
    document.getElementById('log1').innerHTML=output;
}
function observe(eventName) {
    canvas.on(eventName, function(){log(eventName, 1) });
   
}
observe('object:modified');
observe('object:selected');
observe('object:moving');
observe('object:scaling');
observe('object:rotating');
observe('before:selection:cleared');
observe('selection:cleared');
observe('selection:created');
observe('mouse:up');
observe('mouse:down');
observe('mouse:move');
observe('after:render');
observe('path:created');
observe('object:added');