JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas" width="400" height="400" tabindex="1" style="background: black"></canvas>

JavaScript

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

     var i = 0;
     var c = canvas.width/2;
     var arc = .20;
     var flag = "close";

     var drawCircle = function (radius, center, arc) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(c, canvas.height / 2, i, arc, (2 - arc) * Math.PI, false);
         context.lineTo(c, canvas.height /2);
         
         context.fillStyle = "#FFEE00";
         context.fill();
     };

     canvas.focus();
     canvas.onkeydown = function (evt) {
         if (evt.keyCode === 40) {
             if (i > 2) {
                 i = i - 3;
             }
         };
         if (evt.keyCode === 38) {
            i = i + 3;
         }
         
         if (evt.keyCode === 39) {
            c = c + 3;
         }
         
         if (evt.keyCode === 37) {
            c = c - 3;
         }
         
         if (arc <= 0) flag = "open" 
         if (arc >= .30) flag = "close";
         
         if (flag === "open") {
          arc = arc + .05;   
         } else {
          arc = arc - .05;   
         }
         
         drawCircle(i,c, arc);
     }