Javascript Mozilla pdf.js无法在多个render（）操作期间使用同一画布

我正在使用pdf.js以引导模式显示.pdf文件。第一次它工作正常，但如果我取消模式，再次打开它，然后尝试转到下一页，则会出现以下错误：

Cannot use the same canvas during multiple render() operations.

据我所知，它试图再次渲染到同一画布上，这是有意义的，因为我只隐藏了模态，而不是取消渲染任务。也就是说，我不知道如何阻止它。召唤

ctx.clearRect(0, 0, canvas.width, canvas.height);

似乎不起作用。我该如何解决这个问题

代码如下：

function openPDF(path, pageNumber) {
var pdfDoc = null,
    currentPage = 1,
    pageNum = parseInt(pageNumber),
    pageRendering = false,
    pageNumPending = null,
    scale = 1,
    canvas = document.getElementById('pdf'),
    ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);

pdfjsLib.getDocument(path)
    .then(function (pdfDoc_) {
        $("#pdfModal").modal();
        $("#pdfModal").on('hide.bs.modal', function () {
            //ctx.clearRect(0, 0, canvas.width, canvas.height);
            //pdfDoc = null;

            //renderContext = null;
            //renderTask._internalRenderTask.cancel();
        });
        pdfDoc = pdfDoc_;
        $("#page_count").text(pdfDoc.numPages);
        if (pageNum >= 1 && pageNum <= pdfDoc.numPages) {
            currentPage = pageNum;
            queueRenderPage(currentPage);
        } else {
            toastr.error(`There is no page number ${pageNum} in the document`);
            queueRenderPage(currentPage);
        }
    }).catch(function (e) {
        console.log(e.message);
        toastr.error(e.message);
    });

$("#next").click(function () {
    if (currentPage >= pdfDoc.numPages) {
        return;
    }
    queueRenderPage(++currentPage);
});
$("#prev").click(function () {
    if (currentPage <= 1) {
        return;
    }
    queueRenderPage(--currentPage);
});
$("#pdfGoToInput").keypress(function (e) {
    if (e.which === 13) {
        var goToPageNum = parseInt($("#pdfGoToInput").val());
        goToPage(goToPageNum);
    }
});
$("#pdfGoToBtn").click(function () {
    var goToPageNum = parseInt($("#pdfGoToInput").val());
    goToPage(goToPageNum);
});

/*
 * Get page info from document, resize canvas accordingly, and render page.
 */
function renderPage(num) {
    console.log(pageRendering);
    pageRendering = true;

    pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        console.log("rendering page " + num);
        var renderTask = page.render(renderContext);

        $("#pdfModal").on('hide.bs.modal', function () {
            renderTask.cancel();
            //ctx.clearRect(0, 0, canvas.width, canvas.height);
            //pdfDoc = null;

            //renderContext = null;
            //renderTask._internalRenderTask.cancel();
        });

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        }).catch(function (e) {
            pageNumPending = null;
            console.log("page render: " + e);
            toastr.error(e.message);
        });
    }).catch(function (e) {
        console.log("get page: " + e);
        toastr.error(e.message);
    });

    // Update page counters
    $("#page_num").text(num);
}

//If another page rendering in progress, waits until the rendering is finished. Otherwise, executes rendering immediately.
function queueRenderPage(num) {
    if (pageRendering) {
        console.log("page is rendering, " + num +" added to queue");
        pageNumPending = num;
    } else {
        console.log("rendering "+num);
        renderPage(num);
    }
}
function goToPage(goToPageNum) {
    var numPages = pdfDoc.numPages;
    if (goToPageNum > numPages || goToPageNum < 1 || !Number.isInteger(goToPageNum)) {
        return;
    }
    pageNum = goToPageNum;
    queueRenderPage(goToPageNum);
}
}

函数openPDF（路径、页码）{ var pdfDoc=null， currentPage=1， pageNum=parseInt（页码）， pageRendering=false， pageNumPending=null， 比例=1， canvas=document.getElementById（'pdf'）， ctx=canvas.getContext（'2d'）； clearRect（0，0，canvas.width，canvas.height）； pdfjsLib.getDocument（路径） .then（功能（pdfDoc_）{ $（“#pdfModal”）.modal（）； $（“#pdfModal”）.on（'hide.bs.modal'，function（）{ //clearRect（0，0，canvas.width，canvas.height）； //pdfDoc=null； //renderContext=null； //renderTask._internalRenderTask.cancel（）； }); pdfDoc=pdfDoc； $（“#页数”）.text（pdfDoc.numPages）； 如果（pageNum>=1&&pageNum=pdfDoc.numPages）{ 返回； } queueRenderPage（++currentPage）； }); $（“#prev”）。单击（函数（）{ 如果（当前页面编号| | | goToPageNum<1 | |！编号.isInteger（goToPageNum））{ 返回； } pageNum=goToPageNum； 队列渲染页面（goToPageNum）； } }