title: FabricJs Can't draw with "DrawMode button"
body: <p>I want to have the possibility to draw rectangle only after clicking a button .</p>
  
  <p>Javascript :</p>
  
  <pre><code>$("#select").click(function() {
      DrawingRectangle = false;
  });
  $("#draw").click(function() {
      DrawingRectangle = true;
      draw();
  }); 
  
  function draw() {
      if (DrawingRectangle == true) {
          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: 'transparent',
                  stroke: 'red',
                  strokeWidth: 3,
              });
              canvas.add(rectangle);
          });
  
          canvas.on('mouse:move', function(o) {
              if (!isDown) return;
              var pointer = canvas.getPointer(o.e);
              if (origX &gt; pointer.x) {
                  rectangle.set({
                      left: Math.abs(pointer.x)
                  });
              }
              if (origY &gt; pointer.y) {
                  rectangle.set({
                      top: Math.abs(pointer.y)
                  });
              }
  
              rectangle.set({
                  width: Math.abs(origX - pointer.x)
              });
              rectangle.set({
                  height: Math.abs(origY - pointer.y)
              });
              canvas.renderAll();
          });
  
          canvas.on('mouse:up', function(o) {
              isDown = false;
              DrawingRectangle = false;
          });
      }
  }
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;canvas id="paper" width="800" height="300" style="border:1px solid #ccc;position: absolute; z-index : 1"&gt;&lt;/canvas&gt;
  &lt;li align="center"&gt;&lt;button  id="draw"&gt;Draw ROI&lt;/button&gt;&lt;/li&gt;
  &lt;li align="center"&gt;&lt;button  id="select"&gt;Select ROI(s)&lt;/button&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I don't know why the code in the IF statement is never fired . 
  I was thinking aout using <code>canvas.off</code> but I can't figure out, how it can work with it . </p>
  
  <p>My alert don't show too so I guess DrawingRectangle is never true . </p>