JSFiddle - React, Tailwind, and code Playground

HTML

<canvas height=2000 width=2000 id="canvas"></canvas>

JavaScript

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

var w = 50;
var x = w*2.5;
var y = w*2.5;

canvas.strokeStyle = "black";
canvas.fillStyle = "#fce503";

canvas.beginPath();
canvas.arc(x, y, w*1.6, 0, Math.PI*2, true); 
canvas.fill();
canvas.closePath();

canvas.fillStyle = "black";

canvas.beginPath();
canvas.arc(w*2,w*2,w/4, 0, Math.PI*2, true); 
canvas.arc(w*3,w*2,w/4, 0, Math.PI*2, true); 
canvas.fill();
canvas.closePath();

canvas.fillStyle = "white";
canvas.beginPath();
canvas.arc(w*2,w*2,w/10, 0, Math.PI*2, true); 
canvas.arc(w*3,w*2,w/10, 0, Math.PI*2, true); 
canvas.fill();
canvas.closePath();


canvas.fillStyle = "#f26b4e";
canvas.beginPath();
canvas.arc(w*1.5,w*2.75,w/3, 0, Math.PI*2, true); 
canvas.arc(w*3.5,w*2.75,w/3, 0, Math.PI*2, true); 
canvas.fill();
canvas.closePath();

canvas.beginPath();
canvas.moveTo(w*2.5,w*2.85);
canvas.lineTo(w*2.4,w*2.7);
canvas.lineTo(w*2.6,w*2.7);
canvas.lineTo(w*2.5,w*2.85);
canvas.fillStyle = "black";
canvas.lineJoin = "round";
canvas.fill();
canvas.stroke();
canvas.closePath();

drawShape(16, 20);

function drawShape(xoff, yoff) {
  canvas.beginPath();
  canvas.moveTo(w*3, w*3.1);
  canvas.bezierCurveTo(w*3, w*3.1, w*2.8, w*3.33, w*2.5, w*3.1);
  canvas.bezierCurveTo(w*2.2, w*3.33, w*2, w*3.1, w*2, w*3.1);
  canvas.stroke();
}