unable to download webgl content ever after specifying preserveDrawingBuffer = true in html2canvas

I am getting “unable to clone WebGL context as it has preserveDrawingBuffer=false” error even after specifying preserveDrawingBuffer = true in my code. I was trying to download a div with HERE MAPS using html2canvas library in vue. Below is the function I wrote for downloading the div content as image.

downloadImage() {
  const scale = 4 // Specify the quality in megapixels
  const myDiv = this.$refs.hereMap
  const divCan = document.querySelector('#map canvas')
  const gl = divCan.getContext('webgl')
  gl.preserveDrawingBuffer = true
  const clone = divCan.cloneNode(true)
  console.log(divCan)
  const canvas = document.createElement('canvas')
  canvas.width = myDiv.offsetWidth * scale
  canvas.height = myDiv.offsetHeight * scale

  // Create a WebGL context with preserveDrawingBuffer set to true
  const ctx = canvas.getContext('2d')
  ctx.scale(scale, scale)
  html2canvas(myDiv, { canvas: canvas, useCORS: true, logging: true, letterRendering: 1, allowTaint: true, imageTimeout: 0 })
    .then(function(canvas) {
      canvas.toBlob(function(blob) {
        saveAs(blob, 'my-div-image.png') // Download the image
      })
    })
}