JSFiddle - React, Tailwind, and code Playground

by twobomb three

CSS

canvas{
  border:1px solid red;
}

JavaScript

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var ctxW = 500,ctxH = 300;
canvas.width = ctxW;
canvas.height = ctxH;

var imgsSrc = ["https://upload.wikimedia.org/wikipedia/ru/3/39/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2%D0%B5%D1%80%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0.JPG","https://upload.wikimedia.org/wikipedia/commons/1/1b/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_307.jpg","https://snipp.ru/uploads/images/donut.png","https://secure.diary.ru/userdir/6/8/7/6/687665/29160535.jpg"];

var imgs = [];
for(var i = 0; i < imgsSrc.length;i++){
	var img = new Image();
  img.src = imgsSrc[i];
	imgs.push(img)
}

var imgWidth = ctxW/4;//ширина высота изображения
var offX = 0;//смешение
var inx = 0;//индекс массива

function draw(){
	ctx.clearRect(0,0,ctxW,ctxH);
  offX+=3;  //скорость
  if(Math.floor(offX/imgWidth) > 0)
  	inx =  (imgs.length +inx - Math.floor(offX/imgWidth))%imgs.length;
  offX = offX%imgWidth;
  var xStart = -imgWidth+(offX%imgWidth);
  var inxStart = inx;
  while(xStart <= ctxW){  
  	  ctx.drawImage(imgs[inxStart],xStart,0,imgWidth,imgWidth)
      inxStart = (inxStart + 1)%imgs.length;
      xStart+= imgWidth;
  }
	requestAnimationFrame(draw);
}

draw();