如何在javascript中创建具有不同条纹宽度的交替条纹图案？

// 创建Canvas元素
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

// 获取Canvas上下文
var ctx = canvas.getContext('2d');

// 定义条纹宽度和颜色
var stripeWidth = 20;
var stripeColor1 = '#FF0000'; // 第一种条纹颜色
var stripeColor2 = '#0000FF'; // 第二种条纹颜色

// 绘制交替条纹图案
for (var x = 0; x < canvas.width; x += stripeWidth) {
  ctx.fillStyle = (x / stripeWidth) % 2 === 0 ? stripeColor1 : stripeColor2;
  ctx.fillRect(x, 0, stripeWidth, canvas.height);
}