JSFiddle - React, Tailwind, and code Playground

by Gamerfritz

HTML

<canvas id="myCanvas" width="250" height="250"></canvas>

CSS

body {
       margin: 0px;
       padding: 0px;
       background: #f1ecec;
   }
    #myCanvas {
       
    }

JavaScript

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

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];

createCircle(100, 100, '30', function () {
});



function createCircle(x, y, text, callback) {
    var radius = 75;
    var endPercent = 3001;
    var curPerc = 0;
    var counterClockwise = false;
    var circ = Math.PI * 2;
    var quart = Math.PI / 2;
    var text = 30;

    context.lineWidth = 10;
    context.strokeStyle = '#ad2323';
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;

    function doText(context, x, y, text) {
        context.lineWidth = 1;
        context.fillStyle = "#ad2323";
        context.lineStyle = "#ad2323";
        context.font = "28px sans-serif";
        context.fillText(text, x - 15, y + 5);
    }
  var seconds;
  var temp;
      function countdown() {
    seconds = text.innerHTML;
    seconds = parseInt(seconds, 30);
 
    if (seconds == 1) {
      temp = document.getElementById(text);

      return;
    }
 
    seconds--;
    temp = document.getElementById(text);
    temp.innerHTML = seconds;
    timeoutMyOswego = setTimeout(countdown, 1000);
  } 

    function animate(current) {
        context.lineWidth = 10;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
        context.stroke();
        curPerc++;
        if (circles.length) {
            for (var i = 0; i < circles.length; i++) {
                context.lineWidth = 10;
                context.beginPath();
                context.arc(circles[i].x, circles[i].y, radius, -(quart), ((circ) * circles[i].curr) - quart, false);
                context.stroke();
                doText(context,...