JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="the_canvas" width="500" height="500"></canvas>

CSS

canvas {
    border:1px solid black;
}

JavaScript

function bisect(context, degrees, radius, cx, cy) {
    // calculate the point on the edge of the circle
    var x1 = cx + radius * Math.cos(degrees);
    var y1 = cy + radius * Math.sin(degrees);
    // get the point on the opposite side of the circle
    // e.g. if 90, get 270, and vice versa
    // (super verbose but easily readable)
    if (degrees > 2*Math.PI) {
        var degrees2 = degrees - Math.PI;
    } else {
        var degrees2 = degrees + Math.PI;
    }
    // and calculate the point on the opposite side
    var x2 = cx + radius * Math.cos(degrees2);
    var y2 = cy + radius * Math.sin(degrees2);
    // now actually draw the line
    context.beginPath();
    context.moveTo(x1, y1)
    context.lineTo(x2, y2)
    context.stroke();
}

function draw(theCanvas) {
    var context = theCanvas.getContext('2d');
    // draw the big outer circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 2;
    context.arc(250, 250, 220, 0, Math.PI * 360, false);
    context.stroke();
    context.closePath();
    // smaller inner circle
    context.beginPath();
    context.strokeStyle = "#222222";
    context.lineWidth = 1;
    context.arc(250, 250, 110, 0, Math.PI * 360, false);
    context.stroke();
    context.closePath();

    
  //bisect(context, degrees, radius, cx, cy)
    for (j=2; j < 360; j = j + 3) {
        bisect(context, j, 220, 250, 250);    
    }
//    bisect(context, 320, 110, 250, 250);
//    bisect(context, 0, 110, 250, 250);
//    bisect(context, 180, 110, 250, 250);
    
    // circles

}
$(function () {
    var theCanvas = document.getElementById('the_canvas');
    console.log(theCanvas);
    draw(theCanvas, 50, 0, 270);
});