JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<div class="col-md-12" id="canvas-container" style="height: 100%; ">
  <div  id="canvas-container-top">
  1
  </div>
  <div id="canvas-container-left">
  2
  </div>
  <div id="canvas-container-center">
  3
  <canvas id="canvas" class="canvas" style="height: 100%; width: 100%; border: 1px solid grey;"></canvas>
  </div>
    
  </div>

CSS

#canvas-container-top{
  min-height: 40px;
  width: 100%;
  border: 1px dashed lightblue;
  position: fixed;
  top:0;
  left: 40px;
  text-align: center;
}

#canvas-container-left{
  min-width: 40px;
  height: 100%;
  border: 1px dashed lightgrey;
  position: fixed;
  top:40px;
  left: 0px;
  text-align:center;
  vertical-align: middle;
  line-height: 500px;
}

#canvas-container-center{
  width: 100%;
  height: 100%;
  border: 1px dashed lightred;
  position: absolute;
  top:40px;
  left: 40px;
  text-align: center;
}

JavaScript

var canvas = new fabric.Canvas('canvas');
canvas.setDimensions({ width: 800, height: 500 });