title: FabricJS Touch Pan/Zoom Entire Canvas
body: <p>I need to enable touch zoom/panning on a FabricJS canvas. There are libraries that will allow this behavior on an image (see <a href="https://github.com/vash15/pinch-zoom-canvas" rel="noreferrer">pinch-zoom-canvas</a>) or via mouse-click events (see <a href="http://jsfiddle.net/gncabrera/hkee5L6d/5/" rel="noreferrer">this Fiddle</a>) but I can't seem to get the 'touch:gesture' events hooked up properly.</p>
  
  <p>I've built the library with gestures enabled (so <a href="http://fabricjs.com/touch-events" rel="noreferrer">this FabricJS</a> demo works locally for me), but I don't know where to start with combining the gestures with the working fiddle.</p>
  
  <p>I tried variations of code like this:</p>
  
  <pre><code>    canvas.on({
          'touch:gesture': function() {
              var text = document.createTextNode(' Gesture ');
              info.insertBefore(text, info.firstChild);
              // Handle zoom only if 2 fingers are touching the screen
              if (event.e.touches &amp;&amp; event.e.touches.length == 2) {
                  // Get event point
                  var point = new fabric.Point(event.self.x, event.self.y);
                  // Remember canvas scale at gesture start
                  if (event.self.state == "start") {
                      zoomStartScale = self.canvas.getZoom();
                  }
                  // Calculate delta from start scale
                  var delta = zoomStartScale * event.self.scale;
                  // Zoom to pinch point
                  self.canvas.zoomToPoint(point, delta);
              }
  
          },
          'touch:drag': function(e) {
              panning = true;
              var text = document.createTextNode(' Dragging ');
              info.insertBefore(text, info.firstChild);
              if (panning &amp;&amp; e &amp;&amp; e.e) {
                  debugger;
                  var units = 10;
                  var delta = new fabric.Point(e.e.movementX, e.e.movementY);
                  canvas.relativePan(delta);
              }
              panning = false;
          },
          'touch:longpress': function() {
              var text = document.createTextNode(' Longpress ');
              info.insertBefore(text, info.firstChild);
          }
      });
  </code></pre>
  
  <p>But nothing happens when I test on iPhone/iPad.</p>