JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>


		<title>Smiley Game</title> 




	<body>
        <canvas  id = "mycanvas" height = "700" width = "700">
		
		
		</canvas>
		<script src="basics2d.js"></script>

	</body>

JavaScript

//basics2d.js

	var canvas = document.getElementById("mycanvas");

	var ctx = canvas.getContext("2d");

	// Object containing some global Smiley properties.
	var SmileyApp = {
	   radius: 15,
	   xspeed: 0,
	   yspeed: 0,
	   xpos:200,  // x-position of smiley
	   ypos: 200  // y-position of smiley
	};

	var SmileyRed = {
	   radius: 15,
	   xspeed: 0,
	   yspeed: 0,
	   xpos:350,  // x-position of smiley
	   ypos: 65  // y-position of smiley
	};

	var SmileyReds = new Array();

	 for (var i=0; i<5; i++){
	 SmileyReds[i] =  {
	   radius: 15,
	   xspeed: 0,
	   yspeed: 0,
	   xpos:350,  // x-position of smiley
	   ypos: 67  // y-position of smiley
	};
	 SmileyReds[i].xspeed = Math.floor((Math.random()*50)+1);
	 SmileyReds[i].yspeed = Math.floor((Math.random()*50)+1);
	 }

	function drawBigCircle() {
	 var centerX = canvas.width / 2;
		  var centerY = canvas.height / 2;
		  var radiusBig = 300;

		  ctx.beginPath();
		  ctx.arc(centerX, centerY, radiusBig, 0, 2 * Math.PI, false);
	//      context.fillStyle = 'green';
	//      context.fill();
		  ctx.lineWidth = 5;
	 //     context.strokeStyle = '#003300'; // green
		  ctx.stroke();
	}

	function lineDistance( positionx, positiony )
	{
	  var xs = 0;
	  var ys = 0;
	 
	  xs = positionx - 350;
	  xs = xs * xs;
	 
	  ys = positiony - 350;
	  ys = ys * ys;
	 
	  return Math.sqrt( xs + ys );
	}
	function drawSmiley(x,y,r) {
	   // outer border
	   ctx.lineWidth = 3;
	   ctx.beginPath();
	   ctx.arc(x,y,r, 0, 2*Math.PI);
	  //red ctx.fillStyle="rgba(255,0,0, 0.5)";
	   ctx.fillStyle="rgba(255,255,0, 0.5)";
	   ctx.fill();
	   ctx.stroke();

	   // mouth
	   ctx.beginPath();
	   ctx.moveTo(x+0.7*r, y);
	   ctx.arc(x,y,0.7*r, 0, Math.PI, false);

	   // eyes
	   var reye = r/10;
	   var f = 0.4;
	   ctx.moveTo(x+f*r, y-f*r);
	   ctx.arc(x+f*r-reye, y-f*r, reye, 0, 2*Math.PI);
	   ctx.moveTo(x-f*r, y-f*r);
	   ctx.arc(x-f*r+reye, y-f*r, reye, -Math.PI, Math.PI);

	   // nose
	   ctx.moveTo(x,y);
	   ctx.lineTo(x, y-r/2);
	 ...