title: Maintaining object size while zooming in fabric js
body: <p>Is there any solution for maintaining object size even if the user zoom in or out? I want to achieve like on the google maps behavior. So if I have an object (group of object) with a height and width of 20 even if I zoom into it, it should still be 20 pixels by default. Right now the behavior I have is that when the user zoom in or out the image gets bigger / smaller. I also did looping all the objects that I have on the canvas then set the scaleX and scaleY for it but the result was so laggy for me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('c') ;
  
  var circle = new fabric.Circle({
    radius: 20, fill: 'red', left: 100, top: 100
  });
  
  
  var triangle = new fabric.Triangle({
     fill: 'red', left: 200, top: 200
  });
  canvas.add(circle, triangle) ;
  //canvas.zoomToPoint(new fabric.Point(canvas.getCenter().left, canvas.getCenter().top,1)) ;
  
  $(function(){
     
      $('#zoomIn').click(function(){
          canvas.setZoom(canvas.getZoom() * 1.1 ) ;
      }) ;
      
      $('#zoomOut').click(function(){
          canvas.setZoom(canvas.getZoom() / 1.1 ) ;
      }) ;
      
  }) ;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#canvasContainer {border: dotted gray thin ;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"&gt;&lt;/script&gt;
  &lt;button id="zoomIn"&gt;+&lt;/button&gt;
  &lt;button id="zoomOut"&gt;-&lt;/button&gt;
  &lt;div id="canvasContainer"&gt;
      &lt;canvas id="c" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>