JSFiddle - React, Tailwind, and code Playground

by jksolock

HTML

<canvas id="myCanvas" width="240" height="240"></canvas>
ngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;

      ctx.beginPath

JavaScript

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

      
      
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      var radius = 90;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = false;
      var grad = ctx.createLinearGradient(50, 50, 150, 150);
      var endPercent = 85;
 			var curPerc = 0;
      grad.addColorStop(0, "red");
      grad.addColorStop(1, "green");

      
      ctx.beginPath();
      ctx.arc(100, 100, radius, startAngle, endAngle, counterClockwise);
      ctx.lineWidth = 15;
      ctx.lineCap = 'round';

      // line color
      ctx.strokeStyle = 'grey';
      ctx.stroke();
      
      ctx.beginPath();
      ctx.arc(100, 100, radius, startAngle, endAngle, counterClockwise);
      ctx.lineWidth = 15;
      ctx.lineCap = 'round';

      // line color
      ctx.strokeStyle = grad;
      ctx.stroke();   
function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }
animate();