I am starting with the JS library html2canvas to create a screenshot from a div. The problem is that my screenshot is not qualitative and is blurry.

How can I improvemy code in order to have the best possible quality ?

I tried several methods (adding a scale,a dpi, etc) none worked.

var screenshot = document.getElementById("screenshotButton");

screenshot.addEventListener("click", function(event) {
  const captureElement = document.getElementById('main-frame')
  var instance = cy.contextMenus(contextMenuOptions); 
  instance.destroy()

  html2canvas(captureElement)
  .then(canvas => {
   //scale =2,
   // dpi = 400,
    crossOriginIsolated = 'anonymous',
    useCORS= true,
    foreignObjectRendering= true,
    allowTaint =false,
    canvas.style.display = 'none'
    document.body.appendChild(canvas)
    return canvas
  })
  .then(canvas => {
    const image = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream')
    const a = document.createElement('a')
    a.setAttribute('download', inputNodesParam + '.jpeg')
    a.setAttribute('href', image)
    a.click()
    canvas.remove()
  })