title: Adding grid over Fabric.js canvas
body: <p>I just started using Fabric.js (I have to say, I'm impressed).</p>
  
  <p>I want to add a grid over the fabric objects. In the following code, I am putting my grid canvas right over on the Fabric canvas. The problem here is that, I now cannot move my fabric objects!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
    &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="height:480px;width:640px;border:1px solid #ccc;position:relative;font:16px/26px Georgia, Garamond, Serif;overflow:auto;"&gt;
  
   &lt;canvas id="rubber" width="800" height="800" 
     style="position: absolute; left: 0; top: 0; z-index: 0;"&gt;&lt;/canvas&gt;
   &lt;canvas id="myCanvas" width="800" height="800" 
     style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  //&lt;![CDATA[ 
  $(window).load(function(){
  $(document).ready(function () {
  
      function renderGrid(x_size,y_size, color)
      {
          var canvas = $("#myCanvas").get(0);
          var context = canvas.getContext("2d");
  
          context.save();
          context.lineWidth = 0.5;
          context.strokeStyle = color;
  
          // horizontal grid lines
          for(var i = 0; i &lt;= canvas.height; i = i + x_size)
          {
              context.beginPath();
              context.moveTo(0, i);
              context.lineTo(canvas.width, i);
              context.closePath();
              context.stroke();
          }
  
          // vertical grid lines
          for(var j = 0; j &lt;= canvas.width; j = j + y_size)
          {
              context.beginPath();
              context.moveTo(j, 0);
              context.lineTo(j, canvas.height);
              context.closePath();
              context.stroke();
          }
  
          context.restore();
      }
  
      renderGrid(10,15, "gray");
  });
  
  });//]]&gt;  
  
    var canvas = new fabric.Canvas('rubber');
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
  
    canvas.selectionColor = 'rgba(0,255,0,0.3)';
    canvas.selectionBorderColor = 'red';
    canvas.selectionLineWidth = 5;
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am hoping that there is a way to do this in Fabric itself.</p>
  
  <p>Any help would be awesome, thanks!</p>