JSFiddle - React, Tailwind, and code Playground

by Holger50

HTML

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <canvas width="300" height="200"></canvas>
    </body>
</html>

JavaScript

const ctx = document.querySelector('canvas').getContext('2d');

// draw "red"
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 300, 200);

// draw "transparent white" repeatedly
let lastColor;
let percentDone=0;
render();
function render() {
    if (getCurrentColor() !== lastColor)
        console.log(lastColor = getCurrentColor());
        
    percentDone += .005;
    if (percentDone == 1) {percentDone = 1;}
    ctx.fillStyle = 'red';
		ctx.fillRect(0, 0, 300, 200);

    ctx.fillStyle = 'rgba(255,255,255,'+percentDone+')';
    ctx.fillRect(0, 0, 300, 200);
    requestAnimationFrame(render);
}

function getCurrentColor() {
    return ctx.getImageData(0, 0, 1, 1).data.join(',');
}