JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<body onLoad="animatecurve()">
<div>
<canvas id="canvas" style="width: 250px;margin: 0px;padding: 0px;display: block;"></canvas>
<canvas style="position:relative; width: 116px !important;left:5px;top:25px" id="myCanvas"  height="30">
</canvas>
<div class="percent">
	<label id="numberdisplay"></label>%
</div>
</div>
<div style="position:absolute;">
Enter Numberic Value <br/><input type="text" id="my_input" value="0"></span>
</div>
</body>

JavaScript

$(window).load(function(){
var perc = 0;
/*var value = 60;*/
// requestAnimationFrame polyfill    
(function () {
	var lastTime = 0;
	var vendors = ['webkit', 'moz'];
	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
	}
	if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
		var currTime = new Date().getTime();
		var timeToCall = Math.max(0, 16 - (currTime - lastTime));
		var id = window.setTimeout(function () {
			callback(currTime + timeToCall);
		},
		timeToCall);
		lastTime = currTime + timeToCall;
		return id;
	};

	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
		clearTimeout(id);
	};
}());



var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var cx = 40;
var cy = 70;
var width = 68;
var height = 80;

// var degreeAngle, rAngle, dx, dy, r, a, xx, yy;
// setContainerAngle(0);    bad design in those two lines.

function animateFill() {
    
   // draw();
    if (someValue < maxValue){
		someValue++
		requestAnimationFrame(animateFill);
	}
	else{
		someValue--
		requestAnimationFrame(animateFill);
		//fillY = bottomFillY - (bottomFillY - topFillY) * value / 100;		
	}	
	draw();
}

// percentage
var someValue = 0;
var maxValue = 100;

$(document).ready(function () {
    $("#numberdisplay").html(maxValue);
    $("#my_input").focusout(function (event) {
        if ($("#my_input").val().indexOf("%") != -1) {
            if ($.isNumeric($("#my_input").val().replace('%', ''))) {
                // Allow only backspace and delete
                if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
                    //$("#myCanvas").animate({...