JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://www.printhubpro.co.uk/vendor/designer/designer/fabric.js"></script>
<div id="canvas-wrap">
  <canvas id="canvas" class="canvas_class" width="400" height="400"></canvas>
</div>

CSS

#canvas {
   
}

#canvas-wrap {
  border: thin red solid;
  position: absolute;
  top: 50px;
  left: 10px;
}

JavaScript

// Polygon With ID
$(document).ready(function(){
    var canvas = window._canvas = new fabric.Canvas('canvas');
    var polygon1 = new fabric.Polygon([
      {x: 200, y: 0},
      {x: 250, y: 50},
      {x: 250, y: 100},
      {x: 150, y: 100},
      {x: 150, y: 50} ], {
        left: 50,
        top: 150,
        angle: 0,
        fill: 'red',
        id: 1,
      });
    var polygon2 = new fabric.Polygon([
      {x: 200, y: 0},
      {x: 250, y: 50},
      {x: 250, y: 100},
      {x: 150, y: 100},
      {x: 150, y: 50} ], {
        left: 250,
        top: 150,
        angle: 0,
        fill: 'green',
        id: 2,
      });
    canvas.add(polygon1, polygon2).renderAll().setActiveObject(polygon1);
    var obj = canvas.getActiveObject();
    console.log(obj.id);
});