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

[atnsm]

Using latest pdfjs version (2.0.550) I get the following error:

Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.

The code I am using for rendering is as follow:

function renderPage(pageNumber, renderOptions) {
                var documentId = renderOptions.documentId;
                var pdfDocument = renderOptions.pdfDocument;
                var scale = renderOptions.scale;
                var rotate = renderOptions.rotate;
                // Load the page and annotations
                return Promise.all([pdfDocument.getPage(pageNumber), _PDFJSAnnotate2.default.getAnnotations(documentId, pageNumber)]).then(function (_ref) {
                    var _ref2 = _slicedToArray(_ref, 2);
                    var pdfPage = _ref2[0];
                    var annotations = _ref2[1];
                    var page = document.getElementById('pageContainer' + pageNumber);
                    var svg = page.querySelector('.annotationLayer');
                    var canvas = page.querySelector('.canvasWrapper canvas');
                    var canvasContext = canvas.getContext('2d', {alpha: false});
                    var viewport = pdfPage.getViewport(scale, rotate);
                    var transform = scalePage(pageNumber, viewport, canvasContext);
                    var renderContext = {
                        canvasContext: canvasContext,
                        viewport: viewport,
                        transform: transform
                    };
                    // Render the page
                    return Promise.all([pdfPage.render(renderContext), _PDFJSAnnotate2.default.render(svg, viewport, annotations)]).then(function () {
                        // Text content is needed for a11y, but is also necessary for creating
                        // highlight and strikeout annotations which require selecting text.
                        return pdfPage.getTextContent({normalizeWhitespace: true}).then(function (textContent) {
                            return new Promise(function (resolve, reject) {// Render text layer for a11y of text content
                                var textLayer = page.querySelector('.textLayer');
                                var textLayerFactory = new pdfjsViewer.DefaultTextLayerFactory();
                                var textLayerBuilder = textLayerFactory.createTextLayerBuilder(textLayer, pageNumber - 1, viewport);
                                textLayerBuilder.setTextContent(textContent);
                                textLayerBuilder.render();// Enable a11y for annotations
                                // Timeout is needed to wait for `textLayerBuilder.render`
                                setTimeout(function () {
                                    try {
                                        (0, _renderScreenReaderHints2.default)(annotations.annotations);
                                        resolve();
                                    } catch (e) {
                                        reject(e);
                                    }
                                });
                            });
                        });
                    }).then(function () {// Indicate that the page was loaded
                        page.setAttribute('data-loaded', 'true');
                        return[pdfPage, annotations];
                    });
                });
            }

That part of the code is from annotation js project:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

As you can also see every pages hast it own canvas. So, I don't know why I still get such error.

What is going wrong and where I need to look into?

[kishandonepudi]

@atnsm bro can i know whether you're using PDF-annotate in Angular 2+?

[atnsm]

I do not think so. Here is the list of all dependencies:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

[gwl002]

Same problem,how to fix this.

[andreieftimie]

Seeing the same error with the react-pdf-js which is a wrapper around pdfjs-dist.

[Snuffleupagus]

Using latest pdfjs version (2.0.550) I get the following error:

It's quite possible that this issue is a duplicate of #9456, in which case it's been fixed by PR #9853 (which didn't land in time to be included in version 2.0.550).

[timvandermeij]

I would also say so. Let's close this and we can always reopen if the final 2.0 release is done and the problem remains.

[nise]

I run into the same problem. Help needed.

[GregoireDucharme]

Any updates on this issue ?

[huannxdev]

I got this problems when i use pdfjs in angular 8. hope can help someone:

public ngOnDestroy() {
if (this._pdf) {
this._pdf.destroy();
}
if (this.renderTask) {
this.renderTask.cancel();
}
}
in render function, you should get canvas element by: this.element.nativeElement.children[0] instead of query with dom document

[pooya1361]

Any updates on this issue ?

[Alexeir7]

I'm having the same issue, using a single canvas to show the documents and the user can select one of multiple documents to show

[huannxdev]

I'm having the same issue, using a single canvas to show the documents and the user can select one of multiple documents to show

You should cancel then destroy render pdf process before you can render new pdf file

[ndnenkov]

Could someone explain the proper way to cancel and re-render the same page?

From other issues I've seen, you shouldn't use the same canvas to run two render tasks at once. And you have to either wait for the previous one to finish (which I don't want to do) or cancel it.

But calling cancel on the previous task still doesn't resolve the issue where sometimes a page is rendered upside down, which supposedly happens if you're running two render tasks on the same canvas.

@huannxdev 's solution also requires you to destroy the pdf. But I don't want to have to reload it just to re-render a single page.