title: PDFJS: error on Text rendering for the PDF
body: <p>Recently the PDF rendering get a messed up text layer where text gets duplicated with the grey colored overlay.
  No idea about how to fix it as when i remove   <code>textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()</code> it works fine. but need this as if not is render as images which takes a lot of time for large documents </p>
  
  <p>Im using pdfjsViewer.PDFPageView</p>
  
  <p>my code as follows</p>
  
  <pre><code> getPdf() {
  
      var pdfDocument;
  
      if ( this._state !== 'inDOM' ) return false;
  
      pdfjsLib.disableRange = true;
      pdfjsLib.disableStream = true;
  
      let self = this;
      pdfDocument = pdfjsLib.getDocument(this.src);
      pdfDocument.promise.then(function(pdf) {
        self.set( 'pdfDocument', pdf );
        self.set( 'maxNumPages',  pdf.numPages );
        self.set( 'prevBtnDisabled', true );
        self.set( 'documentRendered', true );
  
        self.setViewportWidth();
        self.renderPdf();
      });
  
      return pdfDocument;
    },
  
    renderPdf() {
  
      var pdf = this.pdfDocument,
          maxNumPages,
          pagePromise;
  
      if ( !pdf ) return false;
  
      maxNumPages  = this.maxNumPages;
  
      pagePromise = this.getAndRenderPage( pdf, 1 );
  
      Array.apply( null, new Array( maxNumPages - 1 ) ).forEach( ( value, index ) =&gt; {
  
        pagePromise = pagePromise.then( () =&gt; this.getAndRenderPage( pdf, index + 2 ) );
      } );
    },
  
    getAndRenderPage( pdf, index ) {
  
      return pdf.getPage( index ).then( page =&gt; this.renderPage( page, index ) );
    },
  
  
    renderPage( pdfPage, pageNum ) {
  
      var parentWidth       = this.$().parent().width(),
          pageViewportScale = ( parentWidth &gt;= this.get( 'breakpoints.mobile' ) ) ? 1.5 : 1.3,
          viewport          = pdfPage.getViewport( { scale: parentWidth / pdfPage.getViewport( { scale: pageViewportScale } ).width } ),
          container         = this.$().find( '.pdf_viewer--container' )[ 0 ],
          pdfPageView;
  
      pdfPageView = new pdfjsViewer.PDFPageView( {
        container: container,
        id: pageNum,
        scale: viewport.scale,
        defaultViewport: viewport,
       textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()
  
      } );
      var pages = this.get('pages');
      // Associates the actual page with the view, and drawing it
       pages.push( pdfPageView );
      this.set( 'pages', pages );
      this.set( 'scale', viewport.scale );z
  
      pdfPageView.setPdfPage( pdfPage );
  
      return pdfPageView.draw();
    },
  </code></pre>
  
  <p>i have seen same kind of questioned asked and its for angular 
  Im importing his image as for the reference in here to give a more explanation about the issue</p>
  
  <p><a href="https://i.stack.imgur.com/nXVJA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXVJA.png" alt="enter image description here"></a></p>
  
  <p>Reported Issue 
  <a href="https://stackoverflow.com/questions/58770055/pdfjs-text-layer-rendering-twice">PDFJS: Text layer rendering twice</a></p>