html canvas绘制网格,HTML帆布：绘制图下方网格(HTML Canvas: Drawing grid below a p

我绘制在画布上的图表，并有麻烦绘制图形下面的情节的网格。 我的数据点绘制成矩形(fillRect)。 当我第一次绘制图形，然后绘制它按预期工作网格，但由于电网是在图形上它并不好看。 但是，当我第一次画格，然后绘制图形，所有网格消失下方。

我画我的情节如下：

var plots = document.getElementsByClassName("PlotCanvas");

for (var x=0; x < tokens.length; x++)

{

var canvas = plots[x];

canvas.width = arrayOfArrays[x].length;

var context = canvas.getContext("2d");

for(var point=1; point

{

context.fillRect(point, arrayOfArrays[x][point],...);

}

}

然后绘制网格为：功能DrawGrids(图){

for(var count=0; count

{

var ctx = plots[count].getContext("2d");

ctx.beginPath();

for (var x = 0.5; x < plots[count].width; x += 20) {

ctx.moveTo(x, 0);

ctx.lineTo(x, plots[count].height);

}

for (var y = 0.5; y < plots[count].height; y += 20) {

ctx.moveTo(0, y);

ctx.lineTo(plots[count].width, y);

}

ctx.strokeStyle = "#eee";

ctx.stroke();

}

}

可能有人建议我怎么可以得出下面的情节电网。 或如何绘制图形，使得它不这样整个画布消失较早绘制网格绘制。

谢谢。