Canvas 将空白画布修改成矩阵

我知道在我必须添加形状的地方绘制了一个空白区域

---

在我的项目中，用户需要绘制矩阵，而不是空白。如何做到这一点？

以下是如何在html画布上绘制网格线：

演示：

函数drawGrid（行计数）{
var xSpan=cw/行数；
var ySpan=连续波/行数；
ctx.clearRect（0,0，cw，ch）；
ctx.save（）；
if（lineCount/2==parseInt（lineCount/2））{
ctx.translate（.5,5）；
}
ctx.beginPath（）；
对于（var i=0；iThanks很多，这很有帮助，但这只有在宽度=高度时才能完美工作。如果这些值不相等，我有一个特定区域没有填充线（这些线被打断）。
function drawGrid(lineCount){
    var xSpan=cw/lineCount;
    var ySpan=cw/lineCount;
    ctx.clearRect(0,0,cw,ch);
    ctx.save();
    if(lineCount/2===parseInt(lineCount/2)){
        ctx.translate(.5,.5);
    }
    ctx.beginPath();
    for(var i=0;i<lineCount;i++){
        var x=(i+1)*xSpan;
        var y=(i+1)*ySpan;
        ctx.moveTo(x,0);
        ctx.lineTo(x,ch);
        ctx.moveTo(0,y);
        ctx.lineTo(ch,y);
    }
    ctx.lineWidth=0.50;
    ctx.stroke();
    ctx.restore();
}