JSFiddle - React, Tailwind, and code Playground

by stealthdave

HTML

<canvas id="meter-canvas" width="400" height="400"></canvas>

CSS

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

JavaScript

function arcDraw(percent, width, radius) {
    var gradient = context.createLinearGradient(0,0,400,400);
    gradient.addColorStop(0, '#f30');
    gradient.addColorStop(1, '#ff0');

    context.beginPath();
	context.arc(200,200,radius,(0 - Math.PI / 2),(0 - Math.PI / 2) + Math.PI * 2 * (1 - percent),true);
    var endPoint = applyAngle({x:200,y:200}, percent, (radius - width));
    context.lineTo(endPoint.x, endPoint.y);
    context.arc(200,200, (radius - width), (0 - Math.PI / 2) + Math.PI * 2 * (1 - percent), (0 - Math.PI / 2), false);
    context.lineTo(200, (200 - radius));
    context.fillStyle = gradient;
    context.fill();
    //context.strokeStyle = gradient;
	//context.lineWidth = width;
	//context.stroke();
	context.closePath();
}

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

meter = $('#meter-canvas')[0];
context = meter.getContext('2d');
arcDraw(.95, 20, 150);