JSFiddle - React, Tailwind, and code Playground

by wsgrah

HTML

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

CSS

canvas {
    width: 100%;
    height:100%;
}

JavaScript

var c = document.querySelector('canvas'),
    context = c.getContext('2d'),
    loadedImages = [];

(window.onresize = function(){
    c.width = c.offsetWidth;
    c.height = c.offsetHeight;
})();

var images = [
    "https://raw.githubusercontent.com/nowviskie/Swinburne-annex/master/raw/cHRbowers.jpg",
    "https://raw.githubusercontent.com/nowviskie/Swinburne-annex/master/raw/cHRhours.jpg"
];

images.forEach(function(path) {
   var img = new Image;
    img.onload = function(){
        loadedImages.push(img);
    }
    img.src = path;
});

function flicker(ctx, images) {
    
    var cx = ctx.canvas.width / 2,
        cy = ctx.canvas.height / 2;
    
    images.forEach(function(img, i){
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, 0, 0);
        console.log(img);
    });
    
}
setInterval(function() { flicker(context, loadedImages) }, 60);