JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500px" height="500px" style="border:1px #000 solid;">

JavaScript

var canvas = new fabric.Canvas('canvas');    
json = {"objects":[{"type":"image","originX":"center","originY":"center","left":153.68,"top":96.08,"width":1920,"height":1200,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.16,"scaleY":0.16,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":false,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://wnsp.com/wordpress/http://wnsp.com/wordpress/wp-content/uploads/2009/10/blacksquare.jpg","filters":[]},{"type":"text","originX":"left","originY":"top","left":0,"top":0,"width":38,"height":26,"fill":{"ok":true,"format":"hex6","_tc_id":258,"alpha":1},"overlayFill":null,"stroke":null,"strokeWidth":3,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":5.3,"scaleY":5.3,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":false,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"text":"fsfsf","fontSize":20,"fontWeight":"normal","fontFamily":"Arial","fontStyle":"","lineHeight":1.3,"textDecoration":"","textShadow":"","textAlign":"left","path":null,"backgroundColor":"","textBackgroundColor":"","useNative":true}],"background":"#e12d2d"}
canvas.loadFromJSON(json);


canvas.on('group:selected', onObjectSelected);
canvas.on('object:selected', onObjectSelected);


function onObjectSelected(e) {
  var selectedObject = e.target;
  if (selectedObject.type == 'text') {
    
    hex = selectedObject.get("fill");
    alert(hex);
  }
  else {
    $('#text-wrapper').hide();
  }
  
}