title: Enable and disable mouse events for canvas using Fabric.js
body: <p>I am using Fabric.js to draw rectangles on a canvas. After drawing a rectangle, I want to disable all events on that object. I have tried to do it using <code>canvas.__eventListeners["mouse:down"] = [];</code> but then after the object selection is cleared, the canvas can't apply any events.</p>
  
  <pre><code>&lt;html lang="en" &gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8" /&gt;
  
      &lt;title&gt;HTML5 canvas - Image color picker | Script Tutorials&lt;/title&gt;
  
      &lt;link href="index.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" &gt;&lt;/script&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; 
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="column1"&gt;
          &lt;canvas id="panel" width="700" height="350"&gt;&lt;/canvas&gt;   
      &lt;/div&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;div id="log"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
      (function() {
          var canvas = new fabric.Canvas('panel');
          var clicks=0;
          var x1=0;var y1=0;
          var rect;
          canvas.on('mouse:down', function(e){
           //check if you clicked on an object that exists canvas
              if(e.target == undefined){
                      if (clicks == 0) {
                          var pointer=canvas.getPointer(event.e);
                          console.log(pointer);
                          x1 = pointer.x;
                          y1 =pointer.y;
                          console.log("Start Pointer " +x1 ,y1);
                          clicks++;
                      } 
                      else 
                      {
                          var endpointer=canvas.getPointer();
                          console.log(endpointer);
                          var endx=endpointer.x;
                          var endy=endpointer.y;
                          console.log("Endpointer  " +endx ,endy);
                          console.log("x and y"+x1,y1);
                          var newwidth=endpointer.x- x1;
                          var newheight=endpointer.y - y1;
  
                          rect=new fabric.Rect({
                                  left:x1,
                                  top: y1,
                                  originX :'left',
                                  originY :'top',
                                  width:newwidth,
                                  height:newheight,
                                  selectable: true,
                                  evented:false,
                                  fill:'red',
                                  opacity :0.3
  
                              });
                          canvas.add(rect);
                          //console.log(rect.setWidth(pointer2.x- x1 ));
                          //console.log(rect.setHeight( pointer2.y - y1));
                          canvas.renderAll();
                          clicks=0;   
  
                      }   
                  }
                  else
                  {
  
                      //canvas.getActiveObject().remove();
                      canvas.__eventListeners["mouse:down"] = [];
                  }
              });
  
              canvas.on('object:moving',function(){
                  var bound=rect.getBoundingRect();
                  console.log(bound.left,bound.top,bound.width,bound.height);
              });
              canvas.on('object:scaling',function(){
                  var bound=rect.getBoundingRect();
                  console.log(bound.left,bound.top,bound.width,bound.height);
              });
              canvas.on('object:selected',function(e){
  
                  document.onkeydown = function(e) {
                      if (e.keyCode === 27||e.button==3) {
                        e.preventDefault();
                          canvas.getActiveObject().remove();
                      }
  
                  }
  
              });
  
              fabric.Image.fromURL('fedex.jpg', function (img) {
                  canvas.add(img.set({
                      width: 700,
                      height:350,
                      left: 350,
                      top: 175,
                      selectable: false,
                  }));
              });
      })();
  &lt;/script&gt;
  </code></pre>
  
  <p>  </p>