JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script>
<canvas id="c" height="500" width="500"></canvas>

CSS

canvas {
  border: 1px solid;
  margin: 25px;
}

body {
  background-color: #eee;
}

JavaScript

const canvas = new fabric.Canvas('c');

const radius = 100;
const diameter = radius * 2;

// create a rectangle object
const circle = new fabric.Circle({
  left: 0,
  top: 0,
  stroke: 'black',
  strokeWidth: 1,
  fill: 'transparent',
  radius
});

const radiusLine = new fabric.Line([radius, radius, radius * 2, radius], {
  left: radius,
  top: radius,
  stroke: 'red'
});

const group = new fabric.Group([circle, radiusLine], {
	left: 10,
  top: 100
});

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