JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript

/*
 http://stackoverflow.com/questions/12060386/cant-get-canvas-to-update-via-jquery/12060542#12060542
*/

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function calc(myVal) {
    var radius = 20;
    
    ctx.clearRect(0,0,canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.arc(100, 140, 100, myVal * 50, 0, true);
    ctx.lineWidth = 1;
    ctx.stroke();
};
$(document).ready(function() {
    var count = 0;
    var parsedCount;
    function go(){  
        if (count <= 100) {
            parsedCount = count*.01;
            $('#counter').html('<p>' + parsedCount + '</p>');
            calc(parsedCount);
            count++;
        }
    }
    setInterval(go, 100)
});