JSFiddle - React, Tailwind, and code Playground

HTML

<div style=' text-align:center;'>
    <canvas id='c'
            style = 'border : solid red 1px;'>
  blah
</canvas>
</div>

CSS

.canvas-container { margin:0 auto ;
                    
                  }

JavaScript

/*
 when you instantiate the fabric.canvas, it re-positions the <canvas>
    because fabric creates new DOM stuff:
  <div id="wrapper">
    <div class="canvas-container">
      <canvas class="upper-canvas"        ></canvas>
      <canvas class="lower-canvas" id="c"></canvas
    </div>
  </div>
*/
var canvas = new fabric.Canvas('c' );
var rect   = new fabric.Rect ( { top: 0, left: 0, width: 40 , height:30, fill: '#f55'  ,  opacity: 0.7});
	  canvas.add(rect);
//rect.center();