Aviso emergente de Sweet Alert antes de descargar la imagen HTML de Canvas a PNG

en mi aplicación de dibujo de lienzo tengo un botón de descarga a png, quiero hacerlo para que la imagen del lienzo solo se descargue cuando el usuario haga clic en "sí, guárdelo" en mi mensaje emergente de alerta dulce. En este momento todavía se está descargando automáticamente. Gracias por tu ayuda. (también si alguien tuviera una mejor manera de descargar a través de Javascript que también ayudaría, está descargando el png pero está dañado y no puedo abrirlo)

$('#download').click(function(){
    swal({
        title: "Are you finished your creation?",  
        text: "click yes to save",   
        type: "warning",  
        showCancelButton: true,   
        confirmButtonColor: "#f8c1D9",   
        confirmButtonText: "Yes, save it!",  
        closeOnConfirm: true 
    }, function (isConfirm) {      
        if (isConfirm) {
            swal("Saving!");

            var base64 = document.getElementById("canvas")
              .toDataURL("image/png")
              .replace(/^data:image\/[^;]/, 'data:application/octet-stream');

            document.getElementById("download-png").href = base64
        } else {

        }

        return false; 
    });
});

html

<div id="download">
    <a href="#" id="download-png" download="image.png"><img src="./assets/imgs/tools/save.png" /></a>
</div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta