JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas" width="400" height="400" tabindex="1"></canvas>

JavaScript

var canvas = document.getElementById('mycanvas');
     var context = canvas.getContext('2d');
     var i = 0;
     var c = canvas.width/2;

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

     canvas.focus();
     canvas.onkeydown = function (evt) {
         if (evt.keyCode === 40) {
             if (i > 2) {
                 i = i - 1;
             }
         };
         if (evt.keyCode === 38) {
            i = i + 1;
         }
         
         if (evt.keyCode === 39) {
            c = c + 1;
         }
         
         if (evt.keyCode === 37) {
            c = c - 1;   
         }
         
         drawCircle(i,c);
     }