Zoom in and out with Fabric JS
<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>