When I render some page from my pdf file show a black rectangle over the text. I cant find the reason of this behavior.

The rectangle can be anywhere in any size. Some times is just a few line, some times is a whole page.

Here is my initPdf function:

function initPdf(url){
    
    var { pdfjsLib } = globalThis;
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/pdfjs/build/pdf.worker.mjs';

    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
        thePdf = pdf;
        viewer = document.getElementById('pdf-viewer');
        
        for(page = 1; page <= pdf.numPages; page++) {
          canvas = document.createElement("canvas");
          canvas.id = 'pdfCanvas'+page;
          canvas.className = 'pdf-page-canvas'; 
          canvas.width = '600';
          
          textLayer = document.createElement("div");
          textLayer.id = 'textLayer'+page;     
          textLayer.className = 'textLayer';

          viewer.appendChild(canvas);
                    
          renderPage( page, canvas, textLayer, viewer);
        }
        
    });
}

And here is my renderPage function:

function renderPage(pageNumber, canvas, textLayer, viewer) {
  thePdf.getPage(pageNumber).then(function(page) {

    viewport = page.getViewport({ scale: 1 });
    let scale = canvas.width / viewport.width;
    viewport = page.getViewport({ scale: scale });
    canvas.height = viewport.height;
        
    page.render({
        canvasContext: canvas.getContext('2d'), 
        viewport: viewport
    });
  });
}

This happens with some PDF but not all. But when i use the same PDF with the examples, it show just fine.