JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can" width=200 height=300></canvas>

JavaScript

var c = document.getElementById("can").getContext("2d");
var alpha = 0.01;
var i=0,speed=10;
c.globalAlpha = 0;
   
draw();
function draw() {
    c.globalAlpha = alpha;
    c.font = "44px Georgia";
    c.fillStyle = '#000';
    c.fillText("Ave Satani!!", 120, 250);
    i+=1;
    if (alpha < 1.0 ) {
        if(i%speed===0)
        alpha += 0.001;
        requestAnimationFrame(draw);
    } else  if (alpha >= 1 ) {
        if(i%speed===0)
        alpha -= 0.001;
        requestAnimationFrame(draw);
    }
}