I use react and html-to-image to export HTML to images. Because Safari not working properly with the jpg/png export, I need to export HTML node to SVG (data url is generated like this : data:image/svg...).

With this string, I am creating a new Image inside a Canvas then saving canvas to .Png with method canvas.toDataURL("image/png").

Everything is working on Firefox/Chrome, but on Safari, it's not working the first time.

• First Click - Just avec HTML node (no text)
• Second Click - Some Images + Previous HTML Node
• Third Click - Everything is working

Here is part of my function :

var canvas = document.createElement("canvas")
  var ctx = canvas.getContext('2d')
  var img = new Image; 

  setTimeout(()=>{
    htmlToImage.toSvg(document.querySelector('.Banner'), {pixelRatio: RatioVal}).then((dataUrl) => {            
      canvas.width = 1300*RatioVal;
      canvas.height = 690*RatioVal;            
      img.src = dataUrl;     

      img.onload = () => {        
        ctx.drawImage(img,0,0,canvas.width, canvas.height)  
        var Export = canvas.toDataURL("image/png");   
        document.body.append(Export)
        var a = document.createElement('a');       
        a.href = Export;
        a.download = window.Chara.Nom+".png";
        a.click();              
      };                  
    })
  },600)

Do you know why I need to click on Export 3 times to have a full image ? Is this the best way to convert SVG dataUrl to PNG Image ?

I tried many things (Blob to Png etc..) but the problem is the same on Safari.