title: whole canvas to pan while scrolling mouse up, down, left and right instead of only background image
body: <p>When pinching from trackpad I need to zoom in and zoom out but when user scrolls up, down, left and right from trackpad then I need to pan it accordingly. Currently, the panning works but the panning happens only on background image instead of whole object so that while panning the border box wont be visible and image wont get crop.</p>
  <p>How can I now pan whole container object without image getting crop and border box also not visible?</p>
  <p>Here is the code and jsbin</p>
  <pre><code>&lt;body&gt;
    &lt;div class=&quot;body-wrapper&quot;&gt;
     &lt;h1&gt;Canvas demo&lt;/h1&gt;
      &lt;div class=&quot;canvas&quot;&gt;
        &lt;p&gt;Should move whole canvas not only the background image that is inside container-canvas block&lt;/p&gt;
       &lt;div id=&quot;container&quot; class=&quot;position-absolute container-canvas&quot;&gt;
         &lt;canvas id=&quot;mycanvas&quot; class=&quot;w-100 &quot; style=&quot;height: 100%;!important;&quot; &gt;
         &lt;/canvas&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  var canvas = new fabric.Canvas('mycanvas', {renderOnAddRemove: false, allowTouchScrolling: true})
  canvas.counter = 0;
  var x =(window.innerHeight) ;
  var y =(window.innerWidth);
  var new_width = y - 625
  canvas.setWidth(y);
  canvas.setHeight((window.innerHeight));
  canvas.backgroundColor=&quot;white&quot;;
  var imageUrl = &quot;https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg&quot;
  fabric.Image.fromURL(imageUrl, function(img) {
    canvas.setWidth(img.width + 2);
    canvas.setHeight(img.height + 2);
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
    });
  })
  
  canvas.on(&quot;mouse:wheel&quot;, ({e}) =&gt; {
    e.preventDefault()
    e.stopPropagation()
    handleMouseZoom(e)
  })
  
  const handleMouseZoom = (e) =&gt; {
    if (e.ctrlKey) {
      let min = 0
      const delta = e.deltaY;
      let zoom = canvas.getZoom();
      zoom = parseFloat(zoom, 100)
      if (delta &gt; 0) {
        zoom -= 0.01;
        if (this.min_zoom &gt; 0.05) min = 0.05
        else min = this.min_zoom
        if (zoom &lt;= min) zoom = min;
      }
      else {
        zoom += 0.01;
        if (zoom &gt;= 1.5) zoom = 1.5;
      }
      zoomFn(zoom)
    } else {
      var vpt = canvas.viewportTransform;
      vpt[4] += e.deltaX - 1;
      vpt[5] += e.deltaY - 1;
      canvas.requestRenderAll();
    }
  }
  
  
  const zoomFn = (zoom) =&gt; {
    canvas.setDimensions({
      width: canvas.backgroundImage.width * canvas.getZoom(),
      height: canvas.backgroundImage.height * canvas.getZoom()
    });
    canvas.backgroundImage.rotate(0);
    canvas.viewportCenterObject(canvas.backgroundImage);
    canvas.renderAll();
  
    canvas.setZoom(zoom);
    canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), zoom);
  
    canvas.setDimensions({
      width: canvas.backgroundImage.width * canvas.getZoom(),
      height: canvas.backgroundImage.height * canvas.getZoom()
    });
    canvas.renderAll();
  }
  </code></pre>
  <p><a href="https://jsbin.com/rikecideju/edit?html,js" rel="nofollow noreferrer">https://jsbin.com/rikecideju/edit?html,js</a></p>
  <p><a href="https://i.stack.imgur.com/QOGbJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QOGbJ.jpg" alt="enter image description here" /></a></p>
  <p>I wanted to use the css instead for scrolling when mouse is inside canvas so used the following styling</p>
  <pre><code>.canvas {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
  }
  
  #container {
    overflow: auto!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
  }
  
  .position-absolute {
    position: absolute;
  }
  
  .container-canvas {
    min-height: 500px;
    border: 3px solid lightgray;
  }
  </code></pre>
  <p>and I commented the else part for panning to use browser scrolling instead but seems like <code>mouse:wheel</code> stops browser scrolling.</p>