JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

JavaScript

var canvas = new fabric.Canvas("canvas");
canvas.add(new fabric.Rect({
  width: 150,
  height: 150,
  left: 50,
  top: 100,
  fill: 'green',
  strokeWidth: 0
}));

fabric.Canvas.prototype._checkTarget = function(pointer, obj, globalPointer) {
  if (obj &&
      obj.visible &&
      obj.evented &&
      this.containsPoint(null, obj, pointer)){
    if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
      var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y);
      if (!isTransparent) {
        return true;
      }
    }
    else {
    	var isInsideBorder = this.isInsideBorder(obj, globalPointer.x, globalPointer.y);
            console.log(isInsideBorder);
    	if(!isInsideBorder) {
      	return true;
      }
    }
  }
}

var clickableMargin = 15;

fabric.Canvas.prototype.isInsideBorder = function(target, x, y) {
   // in case the target is the activeObject, we cannot execute this optimization
   // because we need to draw controls too.
   if (target !== canvas._activeObject) {
     //var normalizedPointer = canvas._normalizePointer(target, {x: x, y: y}),
         //targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0),
         //targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0);	
     var pointerCoords = target.getLocalPointer(),
     		 scaledWidth = target.getScaledWidth(),
     		 scaledHeight = target.getScaledHeight();
     	
     console.log(target.getLocalPointer());
     if(pointerCoords.x > clickableMargin && pointerCoords.x < target.width ) {
     	return false;
     }
		 
			
     //var isInsideBorder = fabric.util.isTransparent(
       //target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance);

     return false;
   }
 }