JSFiddle - React, Tailwind, and code Playground

JavaScript

const ITEM_RED = ["red", 3];
const ITEM_ORANGE = ["orange", 6];
const ITEM_BLUE = ["blue", 2];
const ITEM_GREEN = ["green", 5];

const items = [
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_ORANGE,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_ORANGE,
	ITEM_ORANGE,
	ITEM_BLUE,
	ITEM_ORANGE,
	ITEM_RED,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_GREEN,
	ITEM_GREEN,
	ITEM_GREEN,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_GREEN,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_BLUE,
	ITEM_GREEN,
	ITEM_GREEN,
	ITEM_RED,
	ITEM_GREEN,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED,
	ITEM_RED
];

function getCoords(i) {
  const x = i * 12 - 10;
  const y = 5 * (i % 3 === 0 ? i : i - 1);
  return [x, y];
}

function paintItems(canvasEl, firstIndexWithRange) {
  const ctx = canvasEl.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.fillText(`Offset: ${firstIndexWithRange}`, 0, 10);
  //ctx.scale(1, 1);
  ctx.lineCap = 'square';
  ctx.lineJoin = 'round';
  ctx.beginPath();

  const firstItem = items[firstIndexWithRange];
  ctx.moveTo(...getCoords(firstIndexWithRange));
  const lastIndexWithRange = items.length - 1;

  let currentStrokeStyle = ctx.strokeStyle;
  let currentLineWidth = ctx.lineWidth;

  for (let i = firstIndexWithRange + 1; i <= lastIndexWithRange; i++) {
    const currItem = items[i];

    const newStrokeStyle = currItem[0];
    const newLineWidth = currItem[1];

    const newStyleNotEqOldStyle =
          newStrokeStyle !== currentStrokeStyle ||
          newLineWidth !== currentLineWidth;

    if (newStyleNotEqOldStyle) {
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(...getCoords(i - 1));

      currentStrokeStyle = newStrokeStyle;
      ctx.strokeStyle = currentStrokeStyle;
      currentLineWidth = newLineWidth;
      ctx.lineWidth = currentLineWidth;
    }

    ctx.lineTo(...getCoords(i));
  }

  ctx.stroke();
}

const checkOffsets = [
  0,
 ...