title: Display pdf with transparent background with pdf.js
body: <p>I have a pdf with 4 pages, each of the page has a transparent background. I use pdf.js to display them, but I would like to display them with a transparent background on my html page but I can't figure out how I could do that, there is always a white background : </p>
  
  <p><a href="https://i.stack.imgur.com/oytVj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oytVj.png" alt="example"></a></p>
  
  <p>I think it is possible according to <a href="https://github.com/mozilla/pdf.js/pull/8413#issue-229041052" rel="nofollow noreferrer">this issue</a>, but when I change the line <code>page.render(renderContext);</code> to <code>page.render({renderContext, viewport, backgroundColor: 'rgba(0,0,0,0)' });</code> (as it said in the issue) I have the following error :</p>
  
  <p><a href="https://i.stack.imgur.com/6KpdS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6KpdS.png" alt="enter image description here"></a></p>
  
  <p>Any idea on how I could manage that ?</p>
  
  <p>I use pdf.js version v1.9.426 and Firefox 55.0.2 (64 bits).</p>
  
  <p><strong>EDIT :</strong>
  With the following code I have no error in the console but the background of my pdf file is still white. (However, If open the pdf with for example photoshop there is no background)</p>
  
  <p>Link to the PDF file I use : <a href="https://github.com/mozilla/pdf.js/files/1242474/tempPDF.pdf" rel="nofollow noreferrer">tempPDF.pdf</a></p>
  
  <p>Here is my javascript file to display the four pages : </p>
  
  <pre><code>var pdfFile;
  PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
      pdfFile = pdf;
  
      for(var i = 1; i &lt;= 5; i++) {
          var canvas = document.getElementById('canvas'+i);
          var context = canvas.getContext('2d');
          PDFJS.disableStream = true;
          openPage(pdf, i, context, 50);
      }
  });
  
  function openPage(pdfFile, pageNumber, context, ratio) {
      var scale = 10;
      pdfFile.getPage(pageNumber).then(function (page) {
          viewport = page.getViewport(scale);
          // reference canvas via context
          var canvas = context.canvas;
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          canvas.style.width = ratio+"%";
          canvas.style.height = ratio+"%";
          var renderContext = {
              canvasContext: context
              , viewport: viewport
          };
          page.render({canvasContext: context, viewport: viewport, backgroundColor: 'rgba(0,0,0,0)' });
          //page.render(renderContext);
      });
  }
  </code></pre>
  
  <p>And my html page in case that could be useful : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body
          style="background-color:powderblue;"&gt;
  &lt;/body&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"&gt;
      &lt;meta name="description" content="PDF Viewer" /&gt;
      &lt;title&gt;My page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action="pdf_latex_test.php"&gt;
          &lt;input type="submit" value="execute" /&gt; &lt;/form&gt;
  &lt;/body&gt;
  &lt;body&gt;
      &lt;canvas id="canvas1" width="300" height="300"&gt;&lt;/canvas&gt;
      &lt;canvas id="canvas2" width="300" height="300"&gt;&lt;/canvas&gt;
      &lt;canvas id="canvas3" width="300" height="300"&gt;&lt;/canvas&gt;
      &lt;canvas id="canvas4" width="300" height="300"&gt;&lt;/canvas&gt;
  &lt;script src="/assets/js/pdf.js"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/pdf.worker.js"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/pdf.latex.main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>