JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300px" height="300px" ></canvas>
		Value <input type ="text" id="my_input" class="numeric" name="my_input" placeholder="Enter value"/>

JavaScript

var perc = 0;
				$(document).ready(function () {
					$("#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;
								draw();
							}
						} else {
							alert('Value in %');
						}
					});
				});
				function draw() {
					maxWidth = 180;
					maxHeight = 140;
					context.clearRect(0, 0, canvas.width, canvas.height);
					var x = 190;
					var y = 260;

					context.fillStyle = '#f2f2f2';
					context.beginPath();
					context.rect(x - maxWidth / 2, y - maxHeight, maxWidth, maxHeight);
					context.fill();

					var per = perc;
					if (per > 1) perc = 1;
					// fill
					
					context.fillStyle = 'green';
					
					context.beginPath();
					context.rect(x - maxWidth / 2, y - maxHeight * perc, maxWidth, maxHeight * perc);
					
					context.fill();
					
					drawCylinder(100, 100, 180, 180);
					context.beginPath();
					
				}(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...