JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <div class="canvasdiv">
            <canvas id="canvas" width="500" height="500"></canvas>
            <img id="myImage" />
        </div>

JavaScript

$(document).ready(function () {

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

            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            console.log(ctx);
            ctx.lineWidth = 19;
            ctx.lineCap = 'round';
            ctx.shadowBlur = 10;
            var record = 820; // equal to 100% or 360°
            var record_count = (record / record * 100)
            var average = (229 / record * 100);
            var income = (490 / record * 100);
            var target = (750 / record * 100);
            var counterClockwise = true;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;
            var startTime1 = null;
            var startTime2 = null;
            var startTime3 = null;
            var startTime4 = null;
            var duration = null;
            var duration1 = null;
            var duration2 = null;
            var duration3 = null;
            var duration4 = null;
            var options = {
                useEasing: true,
                useGrouping: true,
                separator: ',',
                decimal: '0',
                prefix: '',
                suffix: ''
            };


            function animate_rec(time) {

                if (!startTime1) {
                    startTime1 = time;
                }

                var delta1 = Math.min(1, (time - startTime1) / duration1);
                var curPerc = ((2 * Math.PI) / 100) * (record_count * delta1);
                console.log(curPerc)
                var innerNumRec = (record * delta1);
                //console.log(innerNumRec);

                ctx.strokeStyle =...