title: Draw rectangle with fabric.js
body: <p>Here is the my code to drawing a rectangle with fabric.js, but i am not getting the exact result. I am using fabric.js to draw a rectangle on the canvas in HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>my JS code is:</p>
  
  <pre class="lang-html prettyprint-override"><code>var canvas = new fabric.Canvas("canvas2");
  var rectangle, isDown, origX, origY;
  
  canvas.on('mouse:down', function(o){
      var pointer = canvas.getPointer(o.e);
  
      isDown = true;
      origX = pointer.x;
      origY = pointer.y;
  
      rectangle = new fabric.Rect({
          left: origX,
          top: origY,
          fill: '',
          stroke: 'red',
          strokeWidth: 3,
      });
      canvas.add(rectangle);
  });
  
  canvas.on('mouse:move', function(o){
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      canvas.renderAll();
  });
  
  canvas.on('mouse:up', function(o){
      isDown = false;
  });
  </code></pre>