JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas id="canvas" width="400" height="300"></canvas>

CSS

#canvas {
  border: 1px solid;
}

JavaScript

// Fabric.js - Draw Multiple Shapes

var canvas = ctx = activeObject = '';

console.clear();
canvas = new fabric.Canvas('canvas');
ctx = canvas.getContext('2d');

// make a hexagon
var points = regularPolygonPoints(6,30);
var myPoly = new fabric.Polygon(points, {
	fill: 'transparent',
  stroke: 'red',
  left: 10,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myPoly).renderAll().setActiveObject(myPoly).bringToFront(myPoly);

// make a star
var points = starPolygonPoints(5,50,25);
var myStar = new fabric.Polygon(points, {
	fill: 'transparent',
  stroke: 'red',
  left: 100,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myStar).renderAll().setActiveObject(myStar).sendToBack(myStar);

function regularPolygonPoints(sideCount,radius)
{
  var sweep=Math.PI*2/sideCount;
  var cx=radius;
  var cy=radius;
  var points=[];
  for(var i=0;i<sideCount;i++){
    var x=cx+radius*Math.cos(i*sweep);
    var y=cy+radius*Math.sin(i*sweep);
    points.push({x:x,y:y});
  }
  return(points);
}


function starPolygonPoints(spikeCount, outerRadius, innerRadius) 
{
  var rot = Math.PI / 2 * 3;
  var cx = outerRadius;
  var cy = outerRadius;
  var sweep = Math.PI / spikeCount;
  var points = [];
  var angle = 0;

  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius;
    var y = cy + Math.sin(angle) * outerRadius;
    points.push({x: x, y: y});
    angle += sweep;

    x = cx + Math.cos(angle) * innerRadius;
    y = cy + Math.sin(angle) * innerRadius;
    points.push({x: x, y: y});
    angle += sweep
  }
  return (points);
}