Using Fabricjs 2.3.6

I have searched and searched for solutions. I have been trying to figure this out for months. I've read every post on stack overflow related to fabricjs grids. I've also read the posts on google groups fabricjs and generally, searched the net. I am always hesitant to post here due to my lack of knowledge when compared to others.

I have 3 questions, but would be happy with any help that you might decide to offer.

How do I solve the following issues:

1. fabricjs grid -->How to keep on the background layer? (I've tried using canvas.sendToBack(), but can't seem to get it to work.

2. user input--> How to use input for grid size Width and Height?

3. grid size--> How to use a different height and width? (So, the grid could be 40X50, 40X60, 50X50, etc.)**

The following is the code to generate a simple grid in fabricjs. I can generate various grid sizes but the height and width are the same.

var canvas = new fabric.Canvas('c');
      canvas.setHeight(700);
      canvas.setWidth(700);

    $("#grid").click(function() {
       
      var grid60 = 116.6; //divide 700 by 6 in order to get 60'x60' grid
      var grid50 = 140; //divide 700 by 5 in order to get a 50'x50 grid
      var grid40 = 175; //divide 700 by 4 in order to get a 40'x40 grid
      
      // create grid
        //horizontal lines
        for (var i = 0; i < (700 / grid40); i++) {
          canvas.add(new fabric.Line([i * grid40, 0, i * grid40, 700], {
            stroke: '#ccc',
            selectable: false
          }));

          //vertical lines      
          canvas.add(new fabric.Line([0, i * grid40, 700, i * grid40],
            {
            stroke: '#ccc',
            selectable: false
          }));
    }
//A possible solution that I found for question 1. It seems to work.
var objects = canvas.getObjects('line');
for (let i in objects) {
canvas.sendToBack(objects[i]);
        });