I’ve managed to sort of draw some diagonal stripes on a JS canvas, but the tiling isn’t great. Can anyone help out? I can’t seem to work out why it won’t tile properly:

Screenshot:

Code:

function drawPattern() {

    // Create the stripe pattern
    const patternCanvas = document.createElement('canvas');
    const patternCtx = patternCanvas.getContext('2d');
    const patternSize = 40;
    patternCanvas.width = patternSize;
    patternCanvas.height = patternSize;

    // Draw the pattern
    patternCtx.fillStyle = 'black';
    patternCtx.fillRect(0, 0, patternSize, patternSize);

    // Draw 45-degree yellow stripes
    patternCtx.strokeStyle = 'yellow';
    patternCtx.lineWidth = 10;

    // Diagonal lines that don't tile correctly
    patternCtx.beginPath();
    patternCtx.moveTo(0, patternSize);
    patternCtx.lineTo(patternSize, 0);
    patternCtx.stroke();

    patternCtx.beginPath();
    patternCtx.moveTo(-patternSize, patternSize);
    patternCtx.lineTo(0, 0);
    patternCtx.stroke();

    patternCtx.beginPath();
    patternCtx.moveTo(patternSize, patternSize);
    patternCtx.lineTo(2 * patternSize, 0);
    patternCtx.stroke();

    patternCtx.beginPath();
    patternCtx.moveTo(0, 2 * patternSize);
    patternCtx.lineTo(patternSize, patternSize);
    patternCtx.stroke();

    const pattern = ctx.createPattern(patternCanvas, 'repeat');

    ctx.beginPath();
    ctx.arc(canvas.width/2, canvas.height/2, 300, 0, 2 * Math.PI);
    ctx.closePath();
  
    ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

CodePen: https://codepen.io/neurofluxation/pen/NWZKeed