JSFiddle - React, Tailwind, and code Playground

by joquery

HTML

<canvas id="canvas" />

CSS

#canvas {
    width: 1000px;
    height: 800px;
    background-color: lime;
}

JavaScript

var canvas = jQuery("#canvas")[0];
var context = canvas.getContext("2d");

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

var intervalTimer;
var currentItem = 0;

var globalAlpha;

var imageSrc = [];

imageSrc[0] = "http://placekitten.com/1000/800";
imageSrc[1] = "http://placekitten.com/1000/801";
imageSrc[2] = "http://placekitten.com/1000/802";
imageSrc[3] = "http://placekitten.com/1000/803";
imageSrc[4] = "http://placekitten.com/1000/804";

var images = [];
var loadedImages = 0;

for (var i = 0; i < imageSrc.length; i++) {

    var img = new Image();
    
    
    img.onload = function() {
        images.push(this);
        loadedImages += 1;
        if (loadedImages == imageSrc.length) {
            startSlideShow();
        }
    };
     
    img.src = imageSrc[i];

}

var startSlideShow = function() {
    // all images loaded. start slideshow
    // draw first image

    context.drawImage(images[currentItem],0,0,canvas.width,canvas.height);
    
    intervalTimer = setInterval(changeSlideTimer, 1000);
};

var changeSlideTimer = function() {
    currentItem += 1;
    console.log(currentItem);
    if (images.length == currentItem) {
        currentItem = 0;
    }
    
    clearInterval(intervalTimer);
    context.globalAlpha = 0.01;
    intervalTimer= setInterval(nextImage, 1000);
};

var nextImage = function() {
    context.save();
    context.drawImage(images[currentItem],0,0,canvas.width,canvas.height);
    context.globalAlpha += 0.02;
    
    
    console.log(images[currentItem]);
    
    clearInterval(intervalTimer);
    
    console.log(context.globalAlpha);
    
    if (context.globalAlpha >= 0.9) {
        context.restore();
        intervalTimer = setInterval(changeSlideTimer, 1000);
    } else {
        intervalTimer = setInterval(nextImage, 40);
    }
};