JSFiddle - React, Tailwind, and code Playground

by Lars Holm Jensen

HTML

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

CSS

#canvas {
  height: 400px;
}

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
  
var t = 0;
//console.log(imageData.data.length);
setInterval(() => {

  const imageData = ctx.createImageData(300, 300);
  t+=1;
  // Iterate through every pixel
  for (let i = 0; i < imageData.data.length; i += 4) {
    // Modify pixel data
    imageData.data[i + 0] = 100;  // R value
    imageData.data[i + 1] = ((t+i%299))%128;    // G value
    imageData.data[i + 2] = (i+t)%256;  // B value
    imageData.data[i + 3] = 255;  // A value
  }
  
  ctx.putImageData(imageData, 20, 20);
  
  }, 10);
  


// Draw image data to the canvas