JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cvs" width=200 height=100></canvas>

JavaScript

const canvas = document.getElementById('cvs');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
const imageData = ctx.createImageData(100, 50);
const data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  if (i % 400 > 360) {
    data[i]     = 255;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }
  else {
    data[i]     = 0;
    data[i + 1] = 0;
    data[i + 2] = 0;
    data[i + 3] = 0; // Change this to 255 to get rid of the glitch
  }
}
ctx.putImageData(imageData, 0, 0);
ctx.drawImage(canvas, 0, 0, 100, 50, 0, 0, 200, 100);