JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

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

JavaScript

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

ctx.fillStyle = "#FFA812";
ctx.beginPath();
ctx.arc(75, 75, 30, 0, Math.PI * 2, true); // Outer circle
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(110, 75);
ctx.arc(75, 75, 25, 0, Math.PI, false); // Mouth
ctx.closePath();
ctx.fillStyle = "#000";
ctx.fill();

ctx.beginPath();
ctx.moveTo(65, 65);
ctx.arc(65, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(85, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.closePath();
ctx.fill();

function drawCircle(x, y, radius)
{
    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
}