JSFiddle - React, Tailwind, and code Playground

by Anand Ghorpade

HTML

<canvas id="canvasOne" width="500" height="500">Your browser does not support HTML5 Canvas.</canvas>
<input type="button" id="plus" value="+">
<input type="button" id="minus" value="-">
	<h2 id='status'>0 | 0</h2>

JavaScript

//Start
				theCanvas = document.getElementById("canvasOne");
				context = theCanvas.getContext("2d");
				var status = document.getElementById('status');
				var $canvas = $("#canvasOne");
				var canvasOffset = $canvas.offset();
				var offsetX = canvasOffset.left;
				var offsetY = canvasOffset.top;
				var scrollX = $canvas.scrollLeft();
				var scrollY = $canvas.scrollTop();
				var cw = theCanvas.width;
				var ch = theCanvas.height;
				var scaleFactor = 1.00;
				var panX = 0;
				var panY = 0;

				var mainX = 250;
				// setting the middle point position X value
				var mainY = 100;
				// setting the middle point position Y value
				var mainR = 125;
				// main ellipse radius R
				var no = 5;
				// number of nodes to display
				var div_angle = 360 / no;

				var circle = {
				    centerX: mainX,
				    centerY: mainY + 100,
				    radius: mainR,
				    angle: .9
				};

				var ball = {
				    x: 0,
				    y: 0,
				    speed: .1
				};
				var a = 1.8;
				//Ellipse width
				var b = .5;
				//Ellipse height

				var translatePos = {
				    x: 1,
				    y: 1
				};
				var startDragOffset = {};
				var mouseDown = false;

				var elements = [{}];

				// Animate
				var animateInterval = setInterval(drawScreen, 1);

				//Animation
				function drawScreen() {
				    context.clearRect(0, 0, cw, ch);
				    // Background box
				    context.beginPath();
				    context.fillStyle = '#EEEEEE';
				    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
				    context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
				    context.closePath();

				    context.save();
				    context.translate(panX, panY);
				    context.scale(scaleFactor, scaleFactor);

				    ball.speed = ball.speed + 0.001;

				    for (var i = 1; i <= no; i++) {
				        // male
				        new_angle = div_angle * i;
				        //Starting positions for ball 1 at different points on the ellipse
				        circle.angle = (new_angle *...