JSFiddle - React, Tailwind, and code Playground

HTML

<script>
	document.write('<script src="http://'
			+ (location.host || 'localhost').split(':')[0]
			+ ':35729/livereload.js?snipver=1"></' + 'script>')
</script>
<title>Hello Web - Processing.js Test</title>
<script src="processing.min.js"></script>
	


	<canvas id="myCanvas" width="400" height="400"
		style="border: 1px solid #000000; background: #212421;">
</canvas>
	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");

		var obj1 = {
			xPos : 100,
			yPos : 100,
			xVel : 2,
			yVel : 5,
			r : 2
		}
		var obj2 = {
				xPos : 100,
				yPos : 100,
				xVel : 1,
				yVel : 6,
				r : 7
			}
		
		var obj3 = {
				xPos : 100,
				yPos : 100,
				xVel : 3,
				yVel : 2,
				r : 6
			}
		var obj_t=[obj1,obj2,obj3];
		ctx.font = "30px Arial";
		ctx.fillText("Hello World", 10, 50);
		ctx.lineWidth = 1;
		ctx.strokeStyle = "pink";
		ctx.fillStyle = "black";
		//ctx.arc(xPos, yPos, 40, 0, 2 * Math.PI);

		window.setInterval(draw, 25);
		window.setInterval(check, 5);
		ctx.stroke();

		function draw() {
			
			ctx.clearRect(0, 0, 400, 400);
			for(i in obj_t)
				{
					obj_t[i].xPos = obj_t[i].xPos + obj_t[i].xVel;
					obj_t[i].yPos = obj_t[i].yPos + obj_t[i].yVel;
    			ctx.beginPath();
					ctx.arc(obj_t[i].xPos, obj_t[i].yPos, obj_t[i].r, 0, 2 * Math.PI);
					ctx.stroke();
					ctx.fill();
          ctx.closePath();
				}
			
			
			
			
			//ctx.fillText("Hello World", 10, 50);
			//ctx.arc(obj1.xPos, obj1.yPos, obj1.r, 0, 2 * Math.PI);
			
			

		}
		
		function check() {

			for (i in obj_t) {
				if (obj_t[i].xPos + obj_t[i].r >= 400) {
					obj_t[i].xVel = -obj_t[i].xVel;
				} else if (obj_t[i].xPos - obj_t[i].r <= 0) {
					obj_t[i].xVel = -obj_t[i].xVel;
				}

				if (obj_t[i].yPos + obj_t[i].r >= 400) {
					obj_t[i].yVel = -obj_t[i].yVel;
				} else if (obj_t[i].yPos - obj_t[i].r <= 0) {
					obj_t[i].yVel = -obj_t[i].yVel;
				}
			}

		}

		function dist(x1, y1, x2, y2) {
			var d =...