JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//fabricjs.com/lib/fabric.js" ></script>
<script src="//code.jquery.com/jquery-3.1.1.min.js" ></script>

<div id="myCanvasWrapper">
  <canvas id="myCanvas" width="400" height="400"></canvas>
</div>

CSS

canvas {
  border: 1px solid #333333;
}

JavaScript

function addText(){

  var TextBox = new fabric.Textbox( "Hello \n World", { 
        top: 50,
        left: 50,
        width: 150,
        fill: "0xff00ff",
        fontSize: 20,
        textAlign: 'right',
        height: 50
    });
    canvas.add(TextBox);
    canvas.setActiveObject(TextBox);
}

function setImageWarning(){
	var activeObject = canvas.getActiveObject();
  activeObject.setCoords();
	var _boundingRect = activeObject.getBoundingRect();
  var objectTop	     = _boundingRect.top,
      objectLeft	   = _boundingRect.left,
      safeAreaHeight = 400,
      safeAreaWidth  = 400,
      safeAreaTop    = 0,
      safeAreaLeft   = 0,
      objHeight      = objectTop + _boundingRect.height,
      objWidth       = objectLeft + _boundingRect.width;
  //console.log(objectLeft,safeAreaLeft);   
  activeObject.set({borderColor: 'rgba(102,153,255,0.75)', cornerColor: 'rgba(102,153,255,0.5)'});
  if(objectTop < safeAreaTop || objectLeft < safeAreaLeft) {
       activeObject.set({borderColor: 'red', cornerColor: 'red'});
  } else if(objHeight > safeAreaHeight || objWidth > safeAreaWidth) {
    	activeObject.set({borderColor: 'red', cornerColor: 'red'}); // bot-right corner
  }
}
var canvas= new fabric.Canvas('myCanvas');
addText();

canvas.observe("object:moving", function(e){
	setImageWarning();
});