Screen zoom problem using fabricjs

Question

Screen zoom problem when using fabricjs.

When I have a canvas with many elements, the zoom takes a lot, doing a very slow delay, is breaking the drawing, and the canvas does not finish the rendering correctly, the pencil starts scratching in the wrong place, is a lot of problems...

Javascript:

window.onload = function() {

   var area = document.getElementById('my_area_canvas');
   var size = 0.1;

   function zoomIn() {

      var scale = Math.min( 
        (window.innerWidth - 170) / window.innerWidth, 
        (window.innerHeight - 170) / window.innerHeight 
      );
     scale=+size;
     area.style.transform = 'scale('+scale+')';
   }

   function zoomOut() {

      var scale = Math.min( 
        (window.innerWidth - 170) / window.innerWidth, 
        (window.innerHeight - 170) / window.innerHeight 
      );
      scale=-size;
      area.style.transform = 'scale('+scale+')';
   }

}

HTML:

<button onclick="zoomIn()">+</button>
<button onclick="zoomOut()">-</button>

<div id="my_area_canvas" style="width: 1108px; height: 598px; position: relative; user-select: none;">
    <canvas id="shapes" width="1108" height="598" class="shapes lower-canvas" style="position: absolute; width: 1108px; height: 598px; left: 0px; top: 0px; touch-action: none; user-select: none;">
    </canvas>
</div>

Is there any way to adapt this zoom according to the model it presents here? http://fabricjs.com/fabric-intro-part-5

Answer 1

All I had to do was add this into the functions and solve the problem:

 var originalWidth = canvas.getWidth();
 var originalHeight = canvas.getHeight();
 var ratio = 1;

 canvas.setDimensions({ width: originalWidth * ratio, height: originalHeight * ratio });
 canvas.setZoom(ratio);