OL pattern

by dalvarezmartinez1

HTML

<canvas class="pattern" width="200" height="200"></canvas>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.querySelector(".pattern");
  const context = canvas.getContext('2d');
  
  const spacing = 20;
  // const patternCanvas = createVerticalLinePatternCanvas(spacing, 50);
  //const patternCanvas = createVerticalLinePatternCanvas(spacing, canvas.height);
  // const pattern = context.createPattern(patternCanvas, 'no-repeat');
  // const pattern = context.createPattern(patternCanvas, 'repeat-x');
  
  const patternCanvas = createHorizontalLinePatternCanvas(spacing, canvas.width); 
  const pattern = context.createPattern(patternCanvas, 'repeat-y');

  context.fillStyle = pattern;
  context.fillRect(0, 0, canvas.width, canvas.height);
});
	
function createVerticalLinePatternCanvas(spacing, height) {
	const patternCanvas = document.createElement('canvas');
  patternCanvas.height = height;
  patternCanvas.width = spacing;
	
  const patternContext = patternCanvas.getContext('2d');
	patternContext.beginPath();
  patternContext.moveTo(spacing, 0);
  patternContext.lineTo(spacing, height);
  patternContext.closePath();
  patternContext.stroke();

	return patternCanvas;
}

function createHorizontalLinePatternCanvas(spacing, width) {
	const patternCanvas = document.createElement('canvas');
  patternCanvas.width = width;
  patternCanvas.height = spacing;
	
  const patternContext = patternCanvas.getContext('2d');
	patternContext.beginPath();
  patternContext.moveTo(0, spacing);
  patternContext.lineTo(width, spacing);
  patternContext.closePath();
  patternContext.stroke();

	return patternCanvas;
}