JSFiddle - React, Tailwind, and code Playground

by stealthdave

HTML

<canvas id="meter-canvas" width="128" height="128"></canvas>
<div id="stats"></div>

CSS

#meter-canvas {
    border: 1px solid black;
}

JavaScript

function arcDraw(percent, width) {
    var radius = meter.width / 2;

    meter.width = meter.width;
    context.beginPath();
	context.arc(radius,radius,radius,(0 - Math.PI / 2),(0 - Math.PI / 2) + Math.PI * 2 * (1 - percent),true);
    var endPoint = applyAngle({x:radius,y:radius}, (0 - Math.PI / 2) + Math.PI * 2 * (1 - percent), (radius - width));
    context.lineTo(endPoint.x, endPoint.y);
    context.arc(radius,radius, (radius - width), (0 - Math.PI / 2) + Math.PI * 2 * (1 - percent), (0 - Math.PI / 2), false);
    context.lineTo(radius, 0);
    
	context.closePath();
    
    context.clip();
    context.drawImage(img, 0,0);
}

function applyAngle(point, angle, distance) {
    return {
          x : point.x + (Math.cos(angle) * distance),
          y : point.y + (Math.sin(angle) * distance)
    };
}

var img = new Image();
img.src =...