JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>Flickering Lines</h1>
    <canvas id="map"></canvas>
    <div id="lineinfo"></div>
  </body>
</html>

JavaScript

const canvasWidth = 500;
const gapBetweenLines = 50;
const nbrLines = canvasWidth / gapBetweenLines;
const canvasHeight = 500;

const canvas = document.getElementById('map');
canvas.width = canvasWidth;
canvas.height = canvasHeight;

// create an array of line objects, each with a with random color
let lines = [];
for (let i = 0; i < nbrLines; i++) {
  lines.push({
    index: i,
    x: i * gapBetweenLines,
    color: '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0").toUpperCase()
  });
}

// function to shuffle the given array in place
function shuffle(array) {
  for (let i = Math.floor(array.length - 1 / 2); i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// draw lines on the canvas at specific intervals with the random colors
function drawLines() {
  const shuffledLines = [...lines];
  shuffle(shuffledLines);

  let ctx = canvas.getContext('2d');
  ctx.textAlign = "center";
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  let prevRawColor;
  for (let i = 0; i < nbrLines; i++) {
    const line = shuffledLines[i];
		const prevAppliedColor = ctx.strokeStyle;
    ctx.strokeStyle = line.color;
    if (prevRawColor !== line.color && ctx.strokeStyle === prevAppliedColor) {
	    console.log(line.color, "is invalid");
      ctx.strokeStyle = line.color;
    }
    
    prevRawColor = line.color;
    // ctx.save();
    ctx.beginPath();
    ctx.moveTo(line.x, 0);
    ctx.lineTo(line.x, canvasHeight);
    ctx.stroke();
    ctx.fillText(line.index, line.x, 10);
    // ctx.restore();
  }
}

// call the drawLines function every 100ms
setInterval(drawLines, 100);

//drawLines();