JavaScript循环在画布上创建网格

Question

我要做的是用32x32块随机颜色填充myCanvas。我正在使用循环来创建块并为它们分配颜色。我已经弄清楚如何让循环继续在Y轴上下降，但是我不能绕着X轴向右转。

如果你将画布做得更大，你会看到20块长的块线向右移动。

var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        for (i = 0; i < 400; i++) {
            var X = i * 32;
            var Y = Math.floor(i / 20) * 32;
            ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
            ctx.fillRect(X, Y, 32, 32);
            console.log('X:' + X);
            console.log('Y:' + Y);
        }

我尝试使用这样的模数：

if(i % 20 == 0){
X = 0;
}

但是只有当我得到20的倍数时才会修复它，所以只有画布的左侧会填充块。我的问题在于完成这项工作所涉及的数学问题。对不起，我很累，也很新：（

小提琴：http://jsfiddle.net/orwfo7re/