JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas"></canvas>

JavaScript

$(function () {
    var canvas = $("#mycanvas"),
        ctx = canvas[0].getContext("2d"),
        imgUrl = "http://it-runde.de/dateien/2009/august/14/25.png";
    canvas[0].width=1000;
    canvas[0].height=1000;
    
    var alpha = 1;
    var image = new Image();  
    image.src = imgUrl ;  
    ctx.globalAlpha = alpha;
    $(image).load(function() {
        ctx.drawImage(image, 0, 0, 256, 256);
        draw();
    });
    
    function draw() {        
        // Clear the canvas
        ctx.globalAlpha = 1.0;
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillRect(0,0,canvas.width(),canvas.height());

        // Decrement the alpha and draw the image
        alpha -= 0.1;
        if (alpha < 0) alpha = 0;
        ctx.globalAlpha = alpha;
        console.log(alpha);
        ctx.drawImage(image, 0, 0, 256, 256);
        setTimeout(draw, 100);
        
    }
    
});