JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="jquery-1.9.1.min.js"></script>
<canvas id="myCanvas" ></canvas>

JavaScript

var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 15E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 24,
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;

function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = "rgb(0, 255, 0)";
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.font = '24px "Tahoma"';
    context.fillText((100 - a*100)|0, radius, drawY);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (timeStart = (new Date).getTime());
    timer = window.setTimeout(go, 50)
}
go();