JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script>
<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20">
      <canvas id="draw-area" width="512" height="256" style=""></canvas>
    </div>
    
  <div id="placeHolder" style="position: absolute; bottom: 0px; right: 0px;">
  
  </div>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

JavaScript

var
                  drawingCanvas = document.getElementById('draw-area'),
                  drawingContext = drawingCanvas.getContext('2d', {preserveDrawingBuffer: true}),
                  imageObj = new Image(),
                  canvas = this.__canvas = new fabric.Canvas('draw-area', {backgroundColor: '#FF5150'});
              
              
                imageObj.onload = function(){
                  drawingContext.drawImage(imageObj, 50,50,0,0);
                }
                  imageObj.crossOrigin = 'anonymous';
                  imageObj.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png';

              fabric.Object.prototype.transparentCorners = true;

              var radius = 300;

              //white background
              drawingContext.fillStyle = "#FFFFF"; 
              drawingContext.globalAlpha = 1;
              drawingContext.fillRect(0,0,512,256);


              fabric.Image.fromURL(imageObj.src, function(myImg) {
                canvas.add(myImg); 
              });

            
                
              var pngURL = canvas.toDataURL();
                  console.log(pngURL);
                  
                $('#placeHolder').html('<img src="'+pngURL+'"/>');