'How to scroll the canvas by dragging it

The example:

<html>
    <head>
        <script src="script/fabric.js"></script>
        <script src="script/graph.js"></script>
    </head>
    <body style="margin: 0px" id="BODY">
      <canvas id='example' width="4000" height="4000">example</canvas>
      <script> canvas = createCanvas('example'); </script>
    </body>
</html>

and js:

var greyBox = new fabric.Rect({
  left:100, top:100, fill: 'grey', width: 100, height: 100
});

function createCanvas(id){
  canvas = new fabric.Canvas(id);
  canvas.add(greyBox);
  return canvas;
}

I set canvas size large enough (4000*4000) so we see the scroll bar:

enter image description here

I'm trying to find the way how scroll the canvas (and objects on it) by mousedown and drag. So when you move the canvas, the scroll bar must move after it.

P.S.:There was a similar question (Move the background when drag mouse Fabric.js), but in this way they just move the background and the scroll bar stands still.

canvasfabricjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions