JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="1200" height="900" id="myCanvas">
      Your browser does not support canvas.
  </canvas>

JavaScript

var myCanvas = document.getElementById("myCanvas");
       
        var ctx = myCanvas.getContext("2d");
				
        ctx.beginPath(); 
        ctx.strokeStyle = "000000";
        ctx.fillStyle = "yellow";
        
        ctx.arc(600, 450, 300, 0, Math.PI * 2, true);
        //ctx.stroke();
        ctx.closePath();
        ctx.fill();
        //The Smile.
        ctx.beginPath();
        ctx.strokeStyle="black";
        ctx.lineWidth = 2;
        ctx.arc(600, 500, 150, .1*Math.PI, Math.PI * .9, false);
        ctx.stroke();
        ctx.closePath();
        //The eyes.
        //Left
        ctx.save();
				ctx.scale(0.65, 1);
				ctx.beginPath();
				ctx.arc(800,380,80, 0*Math.PI, Math.PI*2, false);
        ctx.fillStyle="black";
        ctx.fill();
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
        //Right
        ctx.save();
				ctx.scale(0.65, 1);
				ctx.beginPath();
				ctx.arc(1050,380,80, 0*Math.PI, Math.PI*2, false);
        ctx.fillStyle="black";
        ctx.fill();
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
        ctx.style.height ='40px';
        ctx.style.width = '40px';