JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="counter" width="150" height="150"></canvas>

JavaScript

$(document).ready(function() {
    drawCounter();
    writeCounter();
});

function degToRad(degrees) {
    return (Math.PI/180) * degrees;
}

function drawCounter() {
    var canvas = $('#counter')[0];
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        context.beginPath();
        context.fillStyle = 'rgba(176, 217, 177, 1)';
        context.lineWidth = 1;
        context.arc(75, 75, 75, degToRad(0), degToRad(360), false);
        context.fill();
        }
}

function writeCounter() {
    var canvas = $('#counter');
    if (canvas.getContext) {
        var context = canvas.getContext('2d');
        context.lineWidth = 1;
        context.fillStyle = 'rgba(255, 255, 255, 1)';
        context.textBaseline = "middle";
        context.fillText("14");
        context.fill();
        }
}