HTML Canvas: Drawing grid below a plot

[david090]

I'm plotting a graph on a canvas and having trouble to draw the grid of the plot underneath the graph. My data points are drawn as rectangles (fillRect). When I first draw the graph and then draw the grid it works as expected, but since the grid is on the graph it doesnt look good. But when I draw the grid first and then plot the graph, all the grids disappear underneath.I draw my plots as follows:\[code\]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<arrayOfArrays[x].length; point++) { context.fillRect(point, arrayOfArrays[x][point],...); } }\[/code\]Then draw the grids as:function DrawGrids(plots){\[code\] for(var count=0; count<plots.length; 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(); }}\[/code\]Could someone suggest me how I can draw the grid underneath the plot. Or how to draw the graph such that it doesn't draw on the whole canvas thus disappearing the grid drawn earlier.Thank you.