JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas">
    <canvas id="myCanvas" class="circle" width="250" height="250">
      <canvas id="myCanvas01" class="danger" width="250" height="250"></canvas>
    </canvas>
  </div>

  <div class="canvas">
    <canvas id="myCanvas3" class="halfCircle" width="250" height="250"></canvas>
  </div>

  <div class="canvas">
    <canvas id="myCanvas2" class="meter" width="250" height="250"></canvas>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="js/charts.js"></script>

CSS

.canvas {
      padding: 10px;
      display: inline-block;
    }

JavaScript

$('.canvas').each(function(i, item) {
  drawFigure($(this).children().attr('id'), $(this).children().attr('class'));
});

function drawFigure(id, className) {
  $('#' + id).each(function(i, item) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 100;
    var endPercent = 210;
    var curPerc = 0;
    var circ = Math.PI * 1;
    var startPoint = -80;
    var rotate = false;

    if (className == "circle") {
      endPercent = 210;
      startPoint = -80;
    } else if (className == "halfCircle") {
      endPercent = 105;
      startPoint = 110;
    } else if (className == "meter") {
      endPercent = 50;
      startPoint = 40;
    } else if (className == "test") {
      context.lineWidth = 40;
    }

    function animate(current) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(x, y, radius, -(startPoint), ((circ) * current) - startPoint, rotate);
      context.stroke();
      context.lineCap = "round";

      // context.beginPath();
      // context.arc(60, 50, 20, -38, 2, true);
      // context.stroke();
      // context.lineWidth = 10;

      curPerc++;

      if (curPerc < 9) {
        context.lineWidth = 10;
      } else {
        context.lineWidth = 1;
      }

      if (curPerc < endPercent) {
        requestAnimationFrame(function() {
          animate(curPerc / 100)
        });
      }
    }
    animate(50);
  });
}