JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas"></canvas>

JavaScript

const canvas = document.getElementById('mycanvas');
canvas.height = canvas.width = 400;
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(200, 200, 30, 0, Math.PI * 2);
ctx.stroke();

draw(0);
draw(Math.PI / 2);
draw(-Math.PI / 2);
draw(Math.PI);


function draw(rads) {
  rads = Math.round(rads * 1000) / 1000
  ctx.beginPath();
  ctx.moveTo(200, 200);
  ctx.lineTo(200 + 80 * Math.cos(rads), 200 + 80 * Math.sin(rads));
  ctx.stroke();
  ctx.fillText(`${rads} rads`, 200 + 90 * Math.cos(rads), 200 + 90 * Math.sin(rads));
}