JSFiddle - React, Tailwind, and code Playground

by khris

HTML

<canvas id="kaist_chan" width="1000" height="1000">
</canvas>

JavaScript

var canvas = document.getElementById('kaist_chan');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(22, 160, 220, 1)';
ctx.beginPath();
var r = 500;
var b = r / 100 * 99;
var angle = Math.acos(b/r);
console.log(angle);
ctx.arc(150, b * 2, r, -Math.PI / 2 - angle, -Math.PI / 2 + angle, false);
ctx.arc(150, 0, r, Math.PI / 2 - angle, Math.PI / 2 + angle, false);
ctx.fill();