title: Draw rectangle with line in centre using Fabric.js
body: <p><a href="https://i.stack.imgur.com/mRte1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mRte1.png" alt="Sample"></a>Please help me how can I draw rectangle joining center line as shown in figure
  Below is my code for drawing rectangle on mouse down on canvas, What I am trying to do is to draw a line in center of rectangle which will make it as one shape of my canvas </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('canvas');
  
          canvas.on('mouse:down', function (option) {
              console.log(option);
              if (typeof option.target != "undefined") {
                  return;
              } else {
                  var startY = option.e.offsetY,
                      startX = option.e.offsetX;
  
                  console.log(startX, startY);
  
                  var rect2 = new fabric.Rect({
                      top : startY,
                      left : startX,
                      width : 0,
                      height : 0,
                      fill : 'transparent',
                      stroke: 'red',
                      strokewidth: 4
                  });
  
                  canvas.add(rect2);
                  console.log("added");
                  canvas.on('mouse:move', function (option) {
                      var e = option.e;
                      rect2.set('width', e.offsetX - startX);
                      rect2.set('height', e.offsetY - startY);
                      rect2.setCoords();
                  });
  
  
              }
          });
  
          canvas.on('mouse:up', function () {
              canvas.off('mouse:move');
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="500" height="500" style="border: 1px solid red;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>