<canvas id="canvas" width="500" height="200"></canvas>
<input id="range" type="range" min="2" max="500" step="1" value="50">

body {
  margin: 0;
}

#canvas, #range {
  display: block;
}

const range = document.getElementById('range');

let period = +range.value;
const color = [63, 81, 181];

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const patternCanvas = document.createElement('canvas');
const patternCtx = patternCanvas.getContext('2d');


range.addEventListener('input', ({target}) => {
  period = +target.value;
  draw();
})

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  patternCanvas.width = 1;
  patternCanvas.height = period;
  patternCtx.clearRect(0, 0, patternCtx.width, patternCtx.height);
  
  const imageData = patternCtx.createImageData(1, period);

  for (let i = 0; i < imageData.data.length; i += 4) {
    const a = Math.PI * i / imageData.data.length;
    const s = Math.sin(a) * 0.5 + 0.5;
    imageData.data[i + 0] = s * color[0];
    imageData.data[i + 1] = s * color[1];
    imageData.data[i + 2] = s * color[2];
    imageData.data[i + 3] = 255;
  }

  patternCtx.putImageData(imageData, 0, 0);
  const pattern = ctx.createPattern(patternCanvas, 'repeat');

  ctx.fillStyle = pattern;
  pattern.setTransform(new DOMMatrix([1, 0, 0, 1, 0, canvas.height / 2]));
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

draw();