JSFiddle - React, Tailwind, and code Playground

by satej

HTML

<canvas id="smiley" width="800" height="600">

JavaScript

drawSmileyFace();

function drawSmileyFace() {
    var canvas = document.getElementById("smiley");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(300, 300, 100, 0, degreesToRadians(360), true);
    context.fillStyle = "#ffffcc";
    context.fill();
    context.stroke();

    context.beginPath();
    context.arc(250, 270, 15, 0, degreesToRadians(360), true);
    context.stroke();

    context.beginPath();
    context.arc(350, 270, 15, 0, degreesToRadians(360), true);
    context.stroke();

    context.beginPath();
    context.moveTo(300, 285);
    context.lineTo(300, 330);
    context.stroke();

    context.beginPath();
    context.arc(300, 330, 55, degreesToRadians(20), degreesToRadians(160), false);
    context.stroke();
}

function degreesToRadians(degrees) {
    return (degrees * Math.PI) / 180;
}