JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

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

JavaScript

(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 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 %');
		}
	});
});

// canvas related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// general variables
var PI = Math.PI;
var PI2 = PI * 2;

// cylinder related variables
var cx = cw / 2;
var cy = ch / 2;
var width = 65;
var height = 100;
var fillY = cy + height / 2 + 5;
var w2 = width / 2;
var h2 = height / 2;
var h4 = height / 4;
var h8 = height / 8;
var h16 = height / 16;
var ytop = -h2 + h8;
var cpYtop = -h2 - h16;
var ybottom =...