JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="ball-canvas" width="900" height="600"></canvas>

JavaScript

var canvas = document.getElementById('ball-canvas');
		var context = canvas.getContext('2d')
		var radius = 50;
		var strokewidth = 2;
		var strokestyle = '#666';
		var frameCount = 0;
		var w = canvas.width;
		var h = canvas.height;

		// Circle Objects
		var yellowCircle = {
		    x: 50,
		    y: h / 2,
		    radius: radius,
		    color: 'yellow',
		    vx: 1,
		    vy: 1.5
		}

		var redCircle = {
		    x: 450,
		    y: h / 2,
		    radius: radius,
		    color: 'red',
		    vx: 1,
		    vy: -1
		}

		var blueCircle = {
		    x: 850,
		    y: h / 2,
		    radius: radius,
		    color: 'blue',
		    vx: -1,
		    vy: -1.5
		}

		// Create empty array and then push cirlce objects into array
		var circles = [];
		circles.push(yellowCircle, blueCircle, redCircle);

		function checkBounds() {
		    for (var i = 0; i < circles.length; i++) {
		        var c = circles[i];
		        if (c.x > w - c.radius || c.x < c.radius) {
		            c.vx = -c.vx;
		        }
		        if (c.y > h - c.radius || c.y < c.radius) {
		            c.vy = -c.vy;
		        }
		    }
		}

		// Clear last circle and draw again
		function draw() {
		    context.clearRect(0, 0, canvas.width, canvas.height); // Clear the circle from the from page
		    for (var i = 0; i < circles.length; i++) {
		        var c = circles[i];
		        context.beginPath();
		        context.fillStyle = c.color // Set the color of the circle using key:valuecontext.fill();
		        context.lineWidth = strokewidth;
		        context.strokeStyle = strokestyle;
		        context.stroke();
		        context.arc(c.x, c.y, c.radius, 0, Math.PI * 2); // X-axis Position, y-axis Position, radius, % of fill, ?
		        context.closePath();
		        context.fill();
		    }
		}

		function animate() {
		    for (i = 0; i <= 2; i++) {
		        circles[i].x += circles[i].vx;
		        circles[i].y += circles[i].vy;
		    }
		    checkBounds();
		    draw();
		}

		var canvas = document.getElementById('ball-canvas');
		var...