javascript - pdf.js と fabric.js の間の厄介な相互作用

Question

PDFの画像の上にグリッドを描画しようとしているので、pdf.jsの例で作業しています。fabric.js でグリッドを確実に生成するコードをいくつか書いたので、最初のインスタンスでそれを pdf.js の最小限の例に追加して、何が起こるかを確認しました。今でもグリッドを描画しますが、グリッドはマウスダウンの位置から開始することも、カーソルでドラッグすることもありません。以下にコードを記載し、canvas オブジェクトの初期化位置オプションとスケール値の変更をいくつか変更してみました。

何が起こっているのかを明確にし、状況を修正する方法を提案できる人はいますか? どうもありがとう！

var url = 'http://cdn.mozilla.net/pdfjs/helloworld.pdf';
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
  pdf.getPage(1).then(function getPageHelloWorld(page) {
    var scale = 1;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    //
    page.render({canvasContext: context, viewport: viewport});
  });
});

canvas = new fabric.Canvas('the-canvas', { selection: false });


var line, isDown;

var larr = [];
var dims = [5,8];
var points = [];
var offx=[];
var offy=[];
canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  for (var ij=0;ij<dims[0]+dims[1];ij++){
  larr[ij] = new fabric.Line(points, {
    strokeWidth: 1,
    fill: 'black',
    stroke: 'black',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(larr[ij]);
  }
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  for(var i=0; i<dims[0]; i++) {
      offy[i] = points[1] + i/(dims[0]-1)*(pointer.y-points[1]);
  }
  for(var j=0; j<dims[1]; j++) {
      offx[j] = points[0] + j/(dims[1]-1)*(pointer.x-points[0]);
  }
  for (var i=0;i<dims[0];i++) {
    larr[i].set({ x2: pointer.x, y1: offy[i],y2: offy[i] });
  }
  for (var j=0;j<dims[1];j++) {
    larr[dims[0]+j].set({ x1: offx[j], x2: offx[j], y2: pointer.y });
  }
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});