JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<canvas id="canvas" width="300" height="300"></canvas>
<div style="position:absolute;top:152px;left:121px;">
	<canvas style="position:relative;width:60% !important;" id="myCanvas"  height="30"></canvas>
</div>
Enter Numberic Value <input type="text" id="my_input" value="0">
<div><label id="numberdisplay"></label>%</div>

JavaScript

var perc = 0;
var value = 40;
var linevalue = 20;
$(document).ready(function () {
$("#numberdisplay").html(value);
$("#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 (event.keyCode < 48 || event.keyCode > 57) {
					event.preventDefault();
				}
			}
			perc = parseInt($("#my_input").val().replace('%', '')) / 100;
			value = perc*100;
			linevalue = perc*100;
			$("#numberdisplay").html(value);
			//alert(value);
			animateFill();
			draw();
			
		}
	} else {
		alert('Value in %');
	}
});
});
(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 cw = canvas.width;
var ch = canvas.height;
var PI = Math.PI;
var PI2 = PI * 2;
var cx = cw / 2;
var cy = ch / 2;
var width = 65;
var height = 100;
var fillY = cy + height / 2;
var w2 = width / 2;
var h2 = height / 2;
var h4 = height / 4;
var h8 =...