JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=512 height=512></canvas>

CSS

body {
  background-color: ivory;
}

#canvas {
  border: 1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var cw = canvas.width;
        var ch = canvas.height;

        var angle = 0;
        drawLines(1.8 * Math.PI / 4)


        function drawLines(angle) {
          var cw = canvas.width;
          var ch = canvas.height;
          
// create the off-screen canvas
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 10;
canvasPattern.height = 10;
var contextPattern = canvasPattern.getContext("2d");

// draw pattern to off-screen context
contextPattern.fillStyle = 'red';
contextPattern.fillRect(0, 0, 10, 7);
//contextPattern.rotate(40);

// now pattern will work with canvas element
var canvass = document.createElement('canvas');
var context = canvass.getContext("2d");
var pattern = context.createPattern(canvasPattern, "repeat");
          
          var p = ctx.createPattern(canvasPattern, 'repeat');
          ctx.fillStyle = p;
          ctx.translate(cw / 2, ch / 2);
          ctx.rotate(angle);
          ctx.fillRect(-cw, -ch, cw * 2, ch * 2);
          ctx.setTransform(1, 0, 0, 1, 0, 0);
        }