JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="testCanvas"/>

CSS

#textCanvas
{
    width:500px;
    height:500px;
}

JavaScript

function MH5PB(canvasId,            //the id of the canvas to draw the pb on
                value,              //a float value, representing the progress(ex: 0.3444)
                background,         //the background color of the pb(ex: "#ffffff")
                circleBackground,   //the background color of the bars in the circles
                integerColor,       //the color of the outer circle(or the int circle)
                floatColor          //the color of the inner circle(or the float circle)
                )
{
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");
    var barThickness = 2;

    context.lineWidth = barThickness;
    context.strokeStyle = circleBackground;

    
    var innerRadius = 50;
    var outerRadius = 70;
    var center = { x:50, y:80 };
    var percentDone = 60;
    var angleOfPercentDone = percentDone * 360 / 100;
    
    //rotate everything -90 degrees
    angleOfPercentDone -= 90;
    for(var angle = -90; angle < angleOfPercentDone; angle +=5)
    {
        //convert to radians
        var rad = angle * Math.PI/180;
        var c = Math.cos(rad);
        var s = Math.sin(rad);
        var innerPointX = center.x + (innerRadius * c);
        var innerPointY = center.y + (innerRadius * s);
        var outerPointX = center.x + (outerRadius * c);
        var outerPointY = center.y + (outerRadius * s);
        context.moveTo(innerPointX, innerPointY);
        context.lineTo(outerPointX, outerPointY);
        context.stroke();
    }
}

MH5PB('testCanvas',            //the id of the canvas to draw the pb on
                .5,              //a float value, representing the progress(ex: 0.3444)
                '#ffffff',         //the background color of the pb(ex: "#ffffff")
                '#555555',   //the background color of the bars in the circles
                '#990000',       //the color of the outer circle(or the int circle)
                '#009900'          //the color of...