JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <canvas id="canvas" width="300" height="150">
        <p>Ha ha! you looser! your poor browser doesn't support HTML5 xD</p>
    </canvas>
</div>
<p id="info"></p>

CSS

#canvas { 
    border: 5px solid #D6D6D6; 
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
    
    var ctx = $("#canvas").get(0).getContext("2d");
    ctx.fillStyle = "rgb(10,10,10)";
    
    ctx.beginPath();  
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle  
    
    ctx.fillStyle = "yellow";
    ctx.fill();
    
    ctx.moveTo(110,75);  
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)  
    ctx.moveTo(65,65);  
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye  
    ctx.moveTo(95,65);  
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye  
    ctx.stroke();
});