JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="600" height="300"></canvas>

JavaScript

const myCanvas = document.getElementById("myCanvas");
const _ctx = myCanvas.getContext("2d");
const canvasWidth = 600;
const canvasHeight = 300;

// Helper function
const degToRad = (deg) => deg * (Math.PI / 180);

const angleInDeg = 30;
const spaceBetweenLines = 16;
const lineThickness = 16;


_ctx.fillStyle = `black`;
_ctx.fillRect(0, 0, canvasWidth, canvasHeight);


const step = (spaceBetweenLines + lineThickness) / Math.cos(angleInDeg * (Math.PI / 180));

for (let distance = -canvasHeight + step; distance < canvasWidth; distance += step) {
  let x = 0;
  let y = 0;
  
  if(distance < 0) {
    // Handle height
    y = canvasHeight - (distance + canvasHeight);
  } else {
    // Handle height
    x = distance;
  }

  const lineLength = canvasHeight - y;
  const slant = lineLength / Math.tan(degToRad((180 - 90 - angleInDeg)));
 
  const x2 = Math.min(x + slant, canvasWidth);
  const y2 = y + lineLength;

  _ctx.beginPath();
  _ctx.moveTo(x, y);
  _ctx.lineTo(x2, y2);

  _ctx.lineWidth = lineThickness;
  _ctx.strokeStyle = 'green';
  _ctx.stroke();
}