JSFiddle - React, Tailwind, and code Playground

by stealthdave

HTML

<div class="gt-ratings-meter">
    <canvas class="gt-ratings-shadow-canvas" width="90" height="90"></canvas>
    <canvas class="gt-ratings-meter-canvas" width="90" height="90"></canvas>
    <div class="gt-ratings-rating"></div>
</div>

CSS

.gt-ratings-meter {
    background: #069;
    position: relative;
    width: 90px;
    height: 90px;
}
.gt-ratings-meter canvas {
    position: absolute;
    z-index: 10;
}

.gt-ratings-meter-canvas {
    border: 1px solid black;
}

.gt-ratings-meter .gt-ratings-rating {
    color: #fff;
    font: bold 20px/90px Verdana, Arial Black, sans-serif;
    width: 90px;
    height: 90px;
    text-align: center;
    text-shadow: 1px 2px #000;
    z-index: 20;
}

JavaScript

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

    context.clip();
    context.drawImage(img, (center - radius), (center - radius), radius * 2, radius * 2);
}

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 =...