title: Draw vertical lines at regular intervals in rectangle using Fabric.js
body: <p>I want to draw vertical lines in a rectangle at regular intervals and the number of lines is user dependent.</p>
  
  <p>If the number is 3 there should be there vertical lines equally spaced in the rectangle.
  How can I achieve this in Fabric.js</p>
  
  <p>I can draw rectangle using the mouse events.</p>
  
  <p>The code and fiddle is as below:</p>
  
  <pre><code>        //Start when the document is loaded
      $(document).ready(function(){
          var canDraw = true;
  
          //Getting the canvas
          var canvas1= new fabric.Canvas('canvas');
          //Setting the canvas properties
          canvas1.setHeight(400);
          canvas1.setWidth(1300);
          canvas1.renderAll();
          //End of canvas1
  
          //Binding the functions to button_2
          $('#2').click(function(){
  
              console.log("Button 2 cilcked");
              canvas1.isDrawingMode=false;
              //Declaring the variables
              var isMouseDown=false;
              var OriginX=new Array();
              var OriginY= new Array();
              var refRect;
  
              if( canDraw ) {
  
              //Setting the mouse events
              canvas1.on('mouse:down',function(event){
                  //Defining the procedure
                  isMouseDown=true;
                  OriginX=[];
                  OriginY=[];
  
                  //Getting the mouse Co-ordinates
                  var posX=event.e.clientX;
                  var posY=event.e.clientY;
                  OriginX.push(posX);
                  OriginY.push(posY);
  
                  //Creating the rectangle object
                  var rect=new fabric.Rect({
                      left:OriginX[0],
                      top:OriginY[0],
                      width:0,
                      height:0,
                      stroke:'red',
  
                      fill:'white'
                  });
                  canvas1.add(rect);
                 rect.lockRotation=true;
  
                  refRect=rect;  //**Reference of rectangle object
  
              });
              }
  
              canvas1.on('mouse:move', function(event){
                  // Defining the procedure
  
                  if(canDraw) {
                      //Getting the mouse Co-ordinates
                      var posX=event.e.clientX;
                      var posY=event.e.clientY;
  
                      refRect.setWidth(Math.abs((posX-refRect.get('left'))));
                      refRect.setHeight(Math.abs((posY-refRect.get('top'))));
                      refRect.setCoords();
                      canvas1.renderAll();
                  }
              });
  
              canvas1.on('mouse:up',function(){
                  canDraw = false;
              });
  
  
  
  
          });
   });
  </code></pre>
  
  <p>The fiddle: </p>
  
  <p><a href="http://jsfiddle.net/URWru/116/" rel="nofollow">http://jsfiddle.net/URWru/116/</a></p>