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 = i + 1
         } else {
             i = i - 1
         }

         if (i === 200) {
             flag = "shrink";
         };

         if (i === 0) {
             flag = "grow";
         }
     };

     var i = 0;
     setInterval(drawCircle, 5)