PDF rendering with pdf.js provide Uncaught (in promise) Error: Cannot use the same canvas during multiple render() operations

Question

I created a UI using Flask, HTML and JS code. In the UI there is a list of elements; each element has its own button that allows to render a different PDF in same canva. The problem is the when I open the 2nd or the 3rd PDF and I scroll the PDF pages with the mouse it happens that the pages of the 1st PDF are shown. I tried to follow all the suggestions in this first question and this second question, but nothing changed.

This is my html code:

<div class="col-lg-6" id="col-preview">
    {% if data_to_render %} <h5>Preview</h5> {% endif %}
    <canvas id="pdfCanvas"></canvas>
</div>

and this is my js script:

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.querySelectorAll('.btn-secondary');
    buttons.forEach(function (button) {
      button.addEventListener('click', function () {
        var pdfUrl = button.getAttribute('data-pdf-url');
        var chunk = button.getAttribute('data-chunk');
        renderPdf(pdfUrl, 'pdfCanvas', chunk);
      });
    });
  });

function renderPdf(url, containerId, chunk) {
    var canvas = document.getElementById(containerId);
    var pdfDoc = null;
    var currentPage = 1;
    var heightRatio = window.innerHeight/953;
    var widthRatio = window.innerWidth/1920;
    var scale = Math.min(heightRatio, widthRatio);

    function getCanvasTopLeftCoordinates(canvas) {                
        if (canvas) {
            const rect = canvas.getBoundingClientRect();
            const left = rect.left;
            const top = rect.top;

            return { left, top };
        } else {
            return null; // Il canvas non è stato trovato
        }
    }
    
    // This function does not work well when using a smaller screen (to fix)
    function renderHighlightChunk(page, chunk, maxY) {
        const canvasCoordinates = getCanvasTopLeftCoordinates(canvas);
        var lowerCaseChunk = chunk.toLowerCase();

        page.getTextContent().then(function (textContent) {
            const textItems = textContent.items;

            textItems.forEach(function (textItem) {
                const text = textItem.str;
                var lowerCaseText = text.toLowerCase();
                if (lowerCaseChunk.includes(lowerCaseText)) {

                    posX = (textItem.transform[4] + canvasCoordinates.left) * scale;
                    posY = (maxY - textItem.transform[5] - textItem.transform[0] + canvasCoordinates.top + window.scrollY) * scale;

                    const highlight = document.createElement('div');
                    highlight.className = 'highlight';
                    highlight.style.position = 'absolute';
                    highlight.style.left = posX + 'px';
                    highlight.style.top = posY + 'px';
                    highlight.style.width = textItem.width * scale + 'px';
                    highlight.style.height = textItem.height * scale + 'px';
                    highlight.style.backgroundColor = 'yellow';
                    highlight.style.opacity = '0.5';
                    document.body.appendChild(highlight);
                    }
            });
        });
    };

    function clearHighlights() {
        // Trova tutti i div di evidenziazione e rimuovili
        const highlights = document.querySelectorAll('.highlight');
        highlights.forEach(function (highlight) {
            highlight.parentNode.removeChild(highlight);
        });
    }

    var renderingInProgress = false;

    function renderPage(pageNumber) {
        if (renderingInProgress) {
            return;
        }
        renderingInProgress = true;

        clearHighlights();

        pdfDoc.getPage(pageNumber).then(function (page) {
            var viewport = page.getViewport({ scale: scale });

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var context = canvas.getContext('2d');            
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            page.render(renderContext).promise.then(function () {
                renderHighlightChunk(page, chunk, canvas.height);
                renderingInProgress = false;
            });

        }).catch(function (reason) {
            console.error('Errore durante il rendering della pagina', reason);
            renderingInProgress = false;
        });
    }

    function clearCanvas() {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    pdfjsLib.getDocument(url).promise.then(function (pdf) {
        pdfDoc = pdf;
        clearCanvas();
        renderPage(currentPage);

        var isMouseOverCanvas = false;

        canvas.addEventListener('mouseenter', function () {
            isMouseOverCanvas = true;
        });
        
        canvas.addEventListener('mouseleave', function () {
            isMouseOverCanvas = false;
        });

        canvas.addEventListener('wheel', function (e) {
            if (!isMouseOverCanvas) {
                return;
            }

            e.preventDefault();
            if (e.deltaY < 0 && currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
            } else if (e.deltaY > 0 && currentPage < pdfDoc.numPages) {
                currentPage++;
                renderPage(currentPage);
            }
        });

    }).catch(function (reason) {
        console.error('Errore durante il caricamento del PDF', reason);
    });
}

Any other auggestion will be great. Thanks in advance.

Answer 1

I modified the code as follows and it works:

var pdfDoc;

function cancelRendering() {
    if (pdfDoc) {
        pdfDoc.cleanup();
    }
}

function renderPdf(url, containerId, chunk) {
    cancelRendering();