title: Fabricjs load multipage PDF as multiple canvases
body: <p>I want to load a multipage PDF as one page per canvas in fabricjs, but I can't manage to initialize a canvas for each PDF page. As it stands the last page of the PDF is loaded into the canvas as a background image using PDFjs, I just want to perform this with all pages.</p>
  
  <p>Any suggestions are appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('pdfcanvas', {
    width: 420,
    height: 594,
    selection: false,
  });
  
  //load pdf
  document.querySelector('#pdf-upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
  
    if (file.type == 'application/pdf') {
      var fileReader = new FileReader();
      fileReader.onload = function() {
        var typedarray = new Uint8Array(this.result);
        PDFJS.getDocument(typedarray).then(function(pdf) {
          console.log('the pdf has ', pdf.numPages, 'page(s).');
          pdf.getPage(pdf.numPages).then(function(pageEl) {
            var viewport = pageEl.getViewport(2.0);
            var canvasEl = document.querySelector('canvas');
            canvasEl.height = viewport.height;
            canvasEl.width = viewport.width;
            pageEl.render({
              'canvasContext': canvasEl.getContext('2d'),
              'viewport': viewport
            }).then(function() {
  
              var bg = canvasEl.toDataURL('image/png');
  
              fabric.Image.fromURL(bg, function(img) {
                canvas.setBackgroundImage(img);
                var pageEl = document.getElementById('page-container');
                var currentW = canvas.backgroundImage.width;
                var currentH = canvas.backgroundImage.height;
                var windowW = $(window).width();
                var windowH = $(window).height();
                if (currentW &lt; currentH) {
                  img.scaleToHeight(594);
                }
              });
              canvas.renderAll();
            });
          });
        });
      };
      fileReader.readAsArrayBuffer(file);
    }
  });
  
  var currentColor;
  var defaultIcon = {
    width: 62.5,
    height: 50,
    originX: 'center',
    originY: 'center'
  };
  var iconTriangle = new fabric.Triangle(defaultIcon);
  setColor('green');
  canvas.add(iconTriangle);
  //disable icon &amp; hide when hovering over existing icon
  canvas.on('mouse:over', function(obj) {
    iconTriangle.set('opacity', 0);
    canvas.renderAll();
  });
  //restor icon &amp; unhide
  canvas.on('mouse:out', function(e) {
    // if 'target' is null, means mouse is out of canvas
    if (e.target) {
      iconTriangle.set('opacity', 1);
    } else {
      iconTriangle.left = -100;
      iconTriangle.top = -100;
    }
    canvas.renderAll();
  });
  //move pointer icon
  canvas.on('mouse:move', function(obj) {
    iconTriangle.top = obj.e.y - 80;
    iconTriangle.left = obj.e.x - 10;
    canvas.renderAll();
  });
  
  //count each by type and place new icon
  canvas.on('mouse:up', function(e) {
    if (e.target) {
      return
    }
    var red = getObjectsBy((obj) =&gt; obj.fill === 'red').length;
    var green = getObjectsBy((obj) =&gt; obj.fill === 'green').length;
    var yellow = getObjectsBy((obj) =&gt; obj.fill === 'yellow').length;
    document.getElementById("greentally").value = green;
    document.getElementById("yellowtally").value = yellow;
    document.getElementById("redtally").value = red;
    addIcon(e.e.x - 10, e.e.y - 80, currentColor);
  });
  //set icon type
  function iconSet() {
    if (document.getElementById("green").checked == true) {
      setColor('green');
    } else if (document.getElementById("yellow").checked == true) {
      setColor('yellow');
    } else if (document.getElementById("red").checked == true) {
      setColor('red');
    }
  }
  
  function setColor(color) {
    currentColor = color;
    iconTriangle.setColor(currentColor);
    canvas.renderAll();
  }
  
  function getObjectsBy(fn) {
    return canvas.getObjects().filter(fn)
  }
  
  function addIcon(x, y, color) {
    var icon = new fabric.Triangle(defaultIcon);
    icon.setColor(color);
    icon.left = x;
    icon.top = y;
    canvas.add(icon);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px solid #ccc;
  }
  
  .tally {
    position: absolute;
    width: 50px;
    left: 255px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.349/pdf.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.js"&gt;&lt;/script&gt;
  
  &lt;input checked name="iconType" type="radio" id="green" onclick="iconSet()" /&gt;Green &amp;emsp;
  &lt;input class="tally" disabled id="greentally" type="text" value="0"&gt;
  &lt;br&gt;
  &lt;input name="iconType" type="radio" id="yellow" onclick="iconSet()" /&gt; Yellow &amp;emsp;
  &lt;input class="tally" disabled id="yellowtally" type="text" value="0"&gt;
  &lt;br&gt;
  &lt;input name="iconType" type="radio" id="red" onclick="iconSet()" /&gt; red &amp;emsp;
  &lt;input class="tally" disabled id="redtally" type="text" value="0"&gt;
  &lt;br&gt;
  &lt;input id="pdf-upload" type="file"&gt;
  
  &lt;canvas id="pdfcanvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>