title: HTML Canvas: Drawing grid below a plot
body: <p>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.</p>
  
  <p>I draw my plots as follows:</p>
  
  <pre><code>var plots = document.getElementsByClassName("PlotCanvas");
  for (var x=0; x &lt; tokens.length; x++)
      {
          var canvas = plots[x];
          canvas.width = arrayOfArrays[x].length;
          var context = canvas.getContext("2d");
  
          for(var point=1; point&lt;arrayOfArrays[x].length; point++)
          {
              context.fillRect(point, arrayOfArrays[x][point],...);
          }
      }
  </code></pre>
  
  <p>Then draw the grids as:
  function DrawGrids(plots)
  {</p>
  
  <pre><code>    for(var count=0; count&lt;plots.length; count++)
      {
          var ctx = plots[count].getContext("2d");
          ctx.beginPath();
  
          for (var x = 0.5; x &lt; plots[count].width; x += 20) {
              ctx.moveTo(x, 0);
              ctx.lineTo(x, plots[count].height);
          }
          for (var y = 0.5; y &lt; plots[count].height; y += 20) {
              ctx.moveTo(0, y);
              ctx.lineTo(plots[count].width, y);
          }
          ctx.strokeStyle = "#eee";
          ctx.stroke();
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you.</p>