JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/min/jcanvas.min.js"></script>
<canvas></canvas>

CSS

canvas {
  border: 1px solid blue
}

JavaScript

var cv = $('canvas');
var radius = 50;
var deltax = (1 - Math.sin(Math.PI * 2 / 3)) * radius;
console.log(deltax);
cv.drawArc({
  x: -deltax, y: 0, radius: radius,
  start: 0, end: 360,
  fromCenter: false,
  strokeStyle: 'grey',
  strokeWidth: 1
}).drawPolygon({
  x: -deltax, y: 0, radius: radius,
  fromCenter: false,
  strokeStyle: 'black',
  strokeWidth: 1,
  sides: 3
});