JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="1200" height="800"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

init();

var canvas;
var context; // The canvas's 2d context

function setupCanvas() {
   canvas = document.getElementById('myCanvas');
   if (canvas.getContext) {
       context = canvas.getContext('2d');
       context.fillStyle = "black"; // this is default anyway
       context.fillRect(0, 0, canvas.width, canvas.height);
   }
}

function init() {
   setupCanvas();
   startGating();
}

var images = new Array();
var gatingTimer;
var curIndex, imgWidth = 100,
   imgHeight = 80;

function redrawImages() {
   curIndex++;
   if (curIndex > 16) curIndex = 1;

   for (var x = 0; x < 8; x++) {
       for (var y = 0; y < 8; y++) {
           drawCustomImage(x * 150, y * 100);
       }
   }
}

function drawCustomImage(xLoc, yLoc) {
   // create a new pixel array
   imageData = context.createImageData(imgWidth, imgHeight);

   pos = 0; // index position into imagedata array
   xoff = imgWidth / (yLoc / 3); // offsets to "center"
   yoff = imgHeight / 3;

   for (y = 0; y < imgHeight; y++) {
       for (x = 0; x < imgWidth; x++) {
           // calculate sine based on distance
           x2 = x - xoff;
           y2 = y - yoff;
           d = Math.sqrt(x2 * x2 + y2 * y2);
           t = Math.sin(d / 6.0);

           // calculate RGB values based on sine
           r = t * 200;
           g = 125 + t * 80;
           b = 235 + t * 20;

           // set red, green, blue, and alpha:
           imageData.data[pos++] = Math.max(0, Math.min(255, r));
           imageData.data[pos++] = Math.max(0, Math.min(255, g));
           imageData.data[pos++] = Math.max(0, Math.min(255, b));
           imageData.data[pos++] = 255; // opaque alpha
       }
   }

   // copy the image data back onto the canvas
   context.putImageData(imageData, xLoc, yLoc); // Works... kinda
//   context.putImageData(imageData, 0, 0, xLoc, yLoc, imgWidth, imgHeight);  // Doesn't work. Why?
}


function startGating() {
   gatingTimer = setInterval(redrawImages, 1000 / 25); // start gating
}

function...