JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<div class="booak">
  <canvas id="c" class="shadow"></canvas>
</div>

CSS

#c {
  border:1px solid red;
}

.shadow {
  
      box-shadow: 1px 1px 0 1px #ccc, 2px 2px 0 1px #fff, 3px 3px 0 1px #ccc, 4px 4px 0 1px #fff, 5px 5px 10px rgba(0,0,0,0.8);
}

JavaScript

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

var line = new fabric.Line([50, 100, 200, 200], {
        left: 170,
        top: 150,
        stroke: 'blue'
    });

canvas.add(line);