If I understand well your problem, I might have a solution. When I clicked too fast on the buttons previous or next, the canvas had not the time to refresh, and two (or more) pages where drawn, it was unreadable.
To solve the problem, I use the following code :
var stop = false;
function goPrevious() {
if (pageNum > 1 && !stop)
{
stop = true;
pageNum--;
renderPage(pageNum);
}
}
function goNext() {
if (pageNum < pdfDoc.numPages && !stop)
{
stop = true;
pageNum++;
renderPage(pageNum);
}
}
I have also modified the render function in the pdf.js file :
render: function PDFPageProxy_render(params) {
this.renderInProgress = true;
var promise = new Promise();
var stats = this.stats;
stats.time('Overall');
// If there is no displayReadyPromise yet, then the operatorList was never
// requested before. Make the request and create the promise.
if (!this.displayReadyPromise) {
this.displayReadyPromise = new Promise();
this.destroyed = false;
this.stats.time('Page Request');
this.transport.messageHandler.send('RenderPageRequest', {
pageIndex: this.pageNumber - 1
});
}
var self = this;
function complete(error) {
self.renderInProgress = false;
stop = false;
if (self.destroyed || self.cleanupAfterRender) {
delete self.displayReadyPromise;
delete self.operatorList;
self.objs.clear();
}
if (error)
promise.reject(error);
else
promise.resolve();
}
var continueCallback = params.continueCallback;
//etc.
(in my pdf.js file, this is between lines 2563 and 2596).
As a result, no new page will be drawn until the previous page was entirely drawn, even if you click very very fast on the previous/next buttons !
An other solution could be to cancel the previous drawing :
function renderPage(num) {
pdfDoc.getPage(num).then(function(page) {
// canvas resize
viewport = page.getViewport(ratio);
canvas.height = viewport.height;
canvas.width = viewport.width;
// draw the page into the canvas
var pageTimestamp = new Date().getTime();
timestamp = pageTimestamp;
var renderContext = {
canvasContext: ctx,
viewport: viewport,
continueCallback: function(cont) {
if(timestamp != pageTimestamp) {
return;
}
cont();
}
};
page.render(renderContext);
// update page numbers
document.getElementById('page_num').textContent = pageNum;
document.getElementById('page_count').textContent = pdfDoc.numPages;
});
}
I hope it will help you, and sorry for my english ;) Have a nice day