How to fix canvas error when creating pdf viewer?

Question

JavaScript

The error occurs when rendering a pdf file. I realized that somewhere here //Get Document

Uncaught (in promise) Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were canceled or completed.

jQuery(document).ready(function () {
   
  
//PDF buttons

jQuery('.yak_pdf_link').click(function(e){

e.preventDefault();
pdflink = jQuery(this).attr('href');
pdfViewer(pdflink);
jQuery('#yak-my-modal').css('display', 'block');
});	

jQuery('#close-btn').click(function(){
jQuery('#yak-my-modal').css('display', 'none');
});

  
  
//PDF Viewer	
function pdfViewer(pdfUrl){
document.querySelector('#pdf-render').innerHTML = ''
let url = pdfUrl;

let pdfDoc = null,
  pageNum = 1,
  pageIsRendering = false,
  pageNumIsPending = null;
  
  let scale = 1,
    canvas = document.querySelector('#pdf-render'),
    ctx = canvas.getContext('2d');
  
  if(jQuery(window).width() < 660) {
  scale = 1
  }
  
    
// Render the page

const renderPage = num => {
  pageIsRendering = true;
  
  //Get page
  pdfDoc.getPage(num).then(page => {
    //Set scale
    const viewport = page.getViewport({scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    const renderCtx = {
      canvasContext: ctx,
      viewport
    }
    page.render(renderCtx).promise.then(() => {
      pageIsRendering = false;
      
      if(pageNumIsPending != null) {
      renderPage(pageNumIsPending);
      pageNumIsPending = null;
      }
    });
    
    // Output currnet page
    document.querySelector('#page-num').textContent = num;
  });
}

// Check for pages rendering
const queueRenderPage = num => {
  if(pageIsRendering) {
    pageNumIsPending = num;
  } else {
  renderPage(num);
  }
}

// Show Prev Page
const showPrevPage = () => {
if(pageNum <= 1){
return;
}
pageNum--;
queueRenderPage(pageNum);
}

// Show Next Page
const showNextPage = () => {
if(pageNum >= pdfDoc.numPages){
return;
}
pageNum++;
queueRenderPage(pageNum);
}


//Get Document
pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
  pdfDoc = pdfDoc_;
document.querySelector('#page-count').textContent = pdfDoc.numPages;

renderPage(pageNum)
});

//Button Events
document.querySelector('#prev-page').addEventListener('click', showPrevPage);
document.querySelector('#next-page').addEventListener('click', showNextPage);
}

});