JSFiddle - React, Tailwind, and code Playground

by alex bollbach

HTML

<canvas id="canvas" width="200" height="400"></canvas>

JavaScript

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



var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;




var idx = 0;

var colorValR = 0;
var colorValG = 0;
var colorValB = 0;

function draw() {

  for (var i = 0; i < data.length; i += 4) {

    idx++;

    if (idx % 10 == 0) colorValR += 1;
    if (idx % 200 == 0) colorValG += 1;
    if (idx % 200 == 0) colorValB += 1;


    if (colorValR > 255) colorValR = 0;
    if (colorValG > 255) colorValG = 0;
    if (colorValB > 255) colorValB = 0;


    data[i] = colorValR;
    data[i + 1] = colorValG;
    data[i + 2] = colorValB;
    data[i + 3] = 255;



    // complex logic

    if (i % 2000 > 500) {
      if (data[i] >= 200) {
        data[i] = 0;
        data[i + 1] = 0;
        data[i + 2] = 0;
        data[i + 3] = 255;
      }
    } else if (i % 1000 < 500) {
      if (data[i] >= 10) {
        data[i] = 1;
        data[i + 1] = 1;
        data[i + 2] = 1;
        data[i + 3] = 255;
      }
    }



  }


  ctx.putImageData(imageData, 0, 0);
}



setInterval(draw, 20);