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 flag = "grow";

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

         if (flag === "grow" && i <= 300) {
             i = i + 1
         } else if (i > 0) {
             i = i - 1
         }

         canvas.onkeydown = function (evt) {
             if (evt.keyCode === 40) {
                 flag = "shrink";
             };
             if (evt.keyCode === 38) {
                 flag = "grow";
             }
         }
     };

     var i = 0;
     canvas.focus();
     setInterval(drawCircle, 5)