JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div>
<canvas id="canvas" style="width: 250px;margin: 0px;padding: 0px;display: block;"></canvas>
<canvas style="position: relative;width: 150px !important;top:0px !important;z-index:99999;" id="myCanvas"  height="30"></canvas>	
</div>
<div class="percent">
		<label id="numberdisplay"></label>%
	</div>
<br/>

<div style="position:absolute;margin-top:15%;">
Enter Numberic Value <br/><input type="text" id="my_input" value="0"></span>
</div>

JavaScript

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 = canvasWidth / 2;
var cy = canvasHeight / 2;
var width = 65;
var height = 100;

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 = 0;


    $("#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({ opacity: 0.25 });
                } else {
                    // Ensure that it is a number and stop the keypress
                    if...