const patternGap = 40; 
 
 for (let i = 0; i < patterns.length; i++) { 
 const pattern = patterns[i]; 
 
 for (let j = 0; j < colors.length; j++) { 
 const color = colors[j]; 
 
 const offsetY = (patternHeight + patternGap) * i; 
 const y = startY + offsetY; 
 
 ctx.strokeStyle = color; 
 ctx.lineWidth = 3; 
 
 if (pattern === 'dashed') { 
 ctx.setLineDash([10, 5]); 
 } else if (pattern === 'dotted') { 
 ctx.setLineDash([3, 3]); 
 } else { 
 ctx.setLineDash([]); 
 } 
 
 ctx.beginPath(); 
 ctx.moveTo(startX, y); 
 ctx.lineTo(endX, y);