title: Zoom to the centre of canvas using Fabric
body: <p>I'm implementing the Zoom functionality on canvas with fabric.js. I achieved zooming but somehow its not zooming to centre of canvas. Its zooming to top-left corner of canvas.</p>
  
  <p>Below is my JS for the same.</p>
  
  <pre><code>&lt;script&gt;
    var canvas = new fabric.Canvas("Canvas-Id", {
      selection: true,
      width: 800,
      height: 400
    });
  
    canvas.setBackgroundImage('http://i24.photobucket.com/albums/c22/smeagolsfree/TSCHQ.png', canvas.renderAll.bind(canvas), {
      width: canvas.width,
      height: canvas.height
    });
  
    initializeCanvas(canvas)
  
  &lt;/script&gt;
  </code></pre>
  
  <p>In my JS file:</p>
  
  <pre><code>var initializeCanvas;
  
  initializeCanvas = function(canvas) {
    var MAX_ZOOM_IN, MAX_ZOOM_OUT, SCROLL_SIZE, ZOOM_PERCENT, zoomIn, zoomOut;
    SCROLL_SIZE = 120;
    ZOOM_PERCENT = 1.2;
    MAX_ZOOM_IN = 5;
    MAX_ZOOM_OUT = 1;
  
    zoomIn = function() {
      if(canvas.getZoom() &lt; MAX_ZOOM_IN) {
        canvas.setZoom(canvas.getZoom() * ZOOM_PERCENT);
        $('.flaticon-zoom-in').removeClass('disable');
      } else {
        $('.flaticon-zoom-in').addClass('disable');
      }
      $('.flaticon-zoom-out').removeClass('disable');
    };
  
    zoomOut = function() {
      if(canvas.getZoom() &gt; MAX_ZOOM_OUT) {
        canvas.setZoom(canvas.getZoom() / ZOOM_PERCENT);
        $('.flaticon-zoom-out').removeClass('disable');
      } else {
        $('.flaticon-zoom-out').addClass('disable');
      }
      $('.flaticon-zoom-in').removeClass('disable');
    };
  
    $('#zoomIn').click(function() {
      zoomIn();
    });
  
    $('#zoomOut').click(function() {
      zoomOut();
    });
  
    $('.taggable-image-canvas-container').bind('mousewheel', function(e) {
      e.preventDefault();
      (e.originalEvent.wheelDelta / SCROLL_SIZE &gt; 0) ? zoomIn() : zoomOut()
    });
  };
  </code></pre>
  
  <p>Can anyone suggest me how to achieve zooming to centre of canvas.</p>