title: Annoying interaction between pdf.js and fabric.js
body: <p>I am trying to draw a grid on top of the image of a PDF, and so I am working with the pdf.js example. I have written some code which reliably produces a grid in fabric.js, and so in the first instance I added it to the pdf.js minimal example to see what would happen.  Now, it still draws the grid, but the grid neither starts at the location of mousedown nor drags with the cursor. I have put my code below, and I've tried a few permutations of the canvas object initialization location options and changes to the scale value.</p>
  
  <p>Is there someone who can clarify what is going on, and suggest a way to rectify the situation? Many thanks!</p>
  
  <pre><code>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&lt;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&lt;dims[0]; i++) {
        offy[i] = points[1] + i/(dims[0]-1)*(pointer.y-points[1]);
    }
    for(var j=0; j&lt;dims[1]; j++) {
        offx[j] = points[0] + j/(dims[1]-1)*(pointer.x-points[0]);
    }
    for (var i=0;i&lt;dims[0];i++) {
      larr[i].set({ x2: pointer.x, y1: offy[i],y2: offy[i] });
    }
    for (var j=0;j&lt;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;
  });
  </code></pre>