JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><body>

   <canvas id = 'canvas' width = '640' height = '480'></canvas>
   <script type = 'text/javascript' src = 'script.js'></script>

</body></html>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// set colors

context.fillStyle = 'yellow';
context.strokeStyle = 'black';

// draw face

context.beginPath();
context.arc(320, 240, 200, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

context.fillStyle = 'blue';

// draw eyes

context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();

context.strokeStyle = 'red';

// draw mouth 

context.beginPath();
context.arc(320, 240, 150, 0, -1 * Math.PI);
context.stroke();
context.closePath();