JSFiddle - React, Tailwind, and code Playground

by nipponese

HTML

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8" />
        <title>untitled</title>
</head>
<body>
    <div id="main">
        <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000">
        
        </canvas>
        <div id="counter" class="" style="height: 100px; width: 100px; border: 1px solid #000">
        
        </div>
    </div>
</body>
</html>

JavaScript

function calc(myVal) {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var radius = 70;
        
            ctx.beginPath();
            ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
            ctx.lineWidth = 14;
            ctx.stroke();
        };
        $(document).ready(function() {
            var count = 0;
            var parsedCount;
            function go(){    
                if (count <= 200) {
                    parsedCount = count*.01
                    $('#counter').html('<p>' + parsedCount + '</p>');
                    calc(parsedCount);
                    count++;
                }
            }
            setInterval(go, 10)
        });