如何修改代码以在javascript中生成棋盘格？

我的目标是创建一个20x20网格，每个块宽30像素，并将网格着色为白色和浅灰色的格子图案

函数绘图（）{
对于（y=0；y<20；y++）{
对于（x=0；x<20；x++）{
rect=ctx.rect（x*30，y*30，30，30）
}
}
ctx.strokeStyle=“黑色”；
ctx.lineWidth=0.75；
ctx.stroke（）；
对于（y=0；y<20；y+=2）{
对于（x=0；x<20；x+=2）{
rect=ctx.rect（x*30，y*30，30，30）
ctx.fillStyle=“灰色”；
ctx.fillRect（x*大小，y*大小，大小，大小）；
}
}
}   
draw（）解决方案

let canvas=document.querySelector（“.canvas”）；
设ctx=canvas.getContext（“2d”）；
让尺寸=30；
函数绘图（）{
对于（y=1；y），您可以将整个屏幕清除为您的一种颜色。然后您可以逐步通过两个循环（一个用于y，另一个用于x）不要画每一个方块，而是保持一个计数器，然后每秒钟画一个。这样，所有的一种颜色的方块都将通过一次调用和一个奇数或偶数的计数器来绘制。这是我能想到的给其余方块着色的最短方法。如果你使用笔划画线，你可能需要小心开始和关闭路径。这太完美了！！！！非常感谢您的帮助！：）