右键单击pan fabric js

我希望能够用鼠标右键替换onclick按钮平移。

我当前的代码使用

$('#goRight').click(function(){
        var units = 50 ;
        var delta = new fabric.Point(units,0) ;
        canvas.relativePan(delta) ;
    }) ;

    $('#goLeft').click(function(){
        var units = 50 ;
        var delta = new fabric.Point(-units,0) ;
        canvas.relativePan(delta) ;
    }) ;
    $('#goUp').click(function(){
        var units = 50 ;
        var delta = new fabric.Point(0,-units) ;
        canvas.relativePan(delta) ;
    }) ;

    $('#goDown').click(function(){
        var units = 50 ;
        var delta = new fabric.Point(0,units) ;
        canvas.relativePan(delta) ;
    }) ;

我想使用此代码

function startPan(event) {
  if (event.button != 2) {
    return;
  }
  var x0 = event.screenX,
      y0 = event.screenY;
  function continuePan(event) {
    var x = event.screenX,
        y = event.screenY;
    fc.relativePan({ x: x - x0, y: y - y0 });
    x0 = x;
    y0 = y;
  }
  function stopPan(event) {
    $(window).off('mousemove', continuePan);
    $(window).off('mouseup', stopPan);
  };
  $(window).mousemove(continuePan);
  $(window).mouseup(stopPan);
  $(window).contextmenu(cancelMenu);
};
function cancelMenu() {
  $(window).off('contextmenu', cancelMenu);
  return false;
}
$(canvasWrapper).mousedown(startPan);

但是我不知道如何在我的画布上实现它。因为我是fabricJS的新手，这可能是一个简单的任务，但是我无法解决。

我的小提琴或如果您查看版本4，您会发现我将其放入，但无法正常工作。请告诉我我在做什么错。这就是我想要达到的预期结果