<canvas id="c"></canvas>
<!--
https://generativeartistry.com/tutorials/tiled-lines/
-->

canvas{
  position: absolute;
  inset: 0;
  max-width: 100%;
}

const size = window.innerWidth
const dpr = window.devicePixelRatio
const ctx = c.getContext('2d')
const step = 80

c.width = size * dpr
c.height = size * dpr
ctx.scale(dpr, dpr)

ctx.lineCap = 'square'
ctx.lineWidth = 2

for(let x = 0; x < size; x += step) {
  for(let y = 0; y < size; y+= step) {
    draw(x, y, step, step);    
  }
}


function draw(x, y, width, height) {
  const ltr = Math.random() >= 0.5
  if(ltr) {
    ctx.moveTo(x, y)
    ctx.lineTo(x + width, y + height)
  } else {
    ctx.moveTo(x + width, y)
    ctx.lineTo(x, y + height)
  }
  ctx.stroke()
}