canvas requestAnimationFrame

by Mark Rejhon

HTML

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

CSS

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

JavaScript

var images = new Array(4);
for (var i = 0; i < images.length; i++)
{
  images[i] = new Image();
}
images[0].src = "https://i.imgur.com/eZQ4UD0.jpg"
images[1].src = "https://i.imgur.com/0EMQXXW.jpg"
images[2].src = "https://i.imgur.com/7xEapRf.jpg"
images[3].src = "https://i.imgur.com/x5skFDD.jpg"

var frame = 0;
var canvas =  document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function draw() {
  ctx.drawImage(images[frame],0,0,canvas.width,canvas.height);
  frame = (frame + 1) % images.length;
  window.requestAnimationFrame(draw);
}

draw();