JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<canvas width="400" height="400" id="cv"></canvas>

JavaScript

var canvas = document.getElementsByTagName("canvas")[0],
  ctx = canvas.getContext('2d');

function fadeOutRounded(x, y, w, h, r, g, b) {
  var steps = 25,
    dr = (255 - r) / steps,
    dg = (255 - g) / steps,
    db = (255 - b) / steps,
    i = 0,
    interval = setInterval(function() {
    let subX = i*w/steps+1,
    subY = i*h/steps+1;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = `rgb(${Math.round(r + dr * i)},${Math.round(g + dg * i)},${Math.round(b + db * i)})`;
        ctx.rotate(i * Math.PI / 180);
      roundedRect(x + subX / 2, y + subY / 2, w - subX, h - subY);
      i++;
      if (i > steps) {
        clearInterval(interval);
      }
      console.log("fade frame initiated");
    }, 30);
}

fadeOutRounded(10, 10, 100, 100, 123, 213, 50);