JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="context"></canvas>
<input type="text" onchange="check(this)"/>

CSS

input
{
    position:fixed;
    top: 10px;
}

JavaScript

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

function makeRect()
{
    ctx.fillRect(100, 0, 100, 100);
}

function makeCircle()
{
    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
    ctx.fill()
}

function check(e)
{
    if(e.value == "Rect")
        makeRect();
    if(e.value == "Circle")
        makeCircle();
}