JSFiddle - React, Tailwind, and code Playground

by JeffC

HTML

<canvas id="canvas"></canvas>

JavaScript

function Main()
{
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var smiley = {
        x: 50,
        y: 50
    };

    canvas.width = canvas.height = 500;
    var tCtx = Init();
    Update(ctx, tCtx, smiley);
}

function Init()
{
    // init and cache the smiley
    var canvasTemp = document.createElement("canvas");
    var tCtx = canvasTemp.getContext("2d");

    canvasTemp.width = canvasTemp.height = 150;

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

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

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

    return tCtx;
}

function Update(ctx, tCtx, smiley)
{
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(tCtx.canvas, smiley.x, smiley.y);
}

Main();