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();
        context.fillStyle    = '#00f';

  // The font property is like the CSS font property.
  context.font         = 'italic 30px sans-serif';
  context.textBaseline = 'top';

  if (context.fillText) {
    context.fillText('14', 0, 0);
  }

  // It looks like WebKit doesn't support the strokeText method.
  // Tested on Ubuntu 8.10 Linux in WebKitGTK revision 38095 (2008-11-04, svn 
  // trunk build).
  context.font = 'bold 30px sans-serif';
  if (context.strokeText) {
    context.strokeText('14', 0, 50);
  }
        }
}