title: Zoom in and out with Fabric JS
body: <p>I'm building a simple image editor using FabricJS.
  I can do almost anything I need, the problem comes implementing a zoom feature.
  As far as I've understood, FabricJS hasn't anything built-it, so that I'm trying to do it by myself.</p>
  
  <p>I've put 2 buttons on the page "Zoom in" and "Zoom out", on click they activate a jQuery function, respectively</p>
  
  <pre><code>$("#zoomin").click(function() {   
      $("#canvas").width(
          $("#canvas").width() * 1.25
      );
  
      $("#canvas").height(
          $("#canvas").height() * 1.25
      );
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$("#zoomout").click(function() {
      $("#canvas").width(
          $("#canvas").width() * 0.8
      );
  
      $("#canvas").height(
          $("#canvas").height() * 0.8
      );
  });
  </code></pre>
  
  <p>Where #canvas is the id of the div which contains the canvas.
  This code works properly, it actually zooms in and out, but that causes a problem when I want to grab and move around the objects on the canvas, the snap area is not where the object is visible, when I zoom in, the snap area results to be moved to top-left of the visible object, when I zoom out it results to be moved to the bottom-right.</p>
  
  <p>To explain, this is what happens after a zoom out
  <a href="https://i.stack.imgur.com/hOuog.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hOuog.jpg" alt="enter image description here"></a></p>
  
  <p>Is there a way to make the snap area consistent with the position of the shown object?</p>
  
  <p>Is there a better way to implement the zooming function?</p>