Нужно сохранить картинку при клике на кнопку,картинка формируеться с разных background,которое ложаться друг на друга

function full_screen_save(){
                do_it_hide();
                var c=document.getElementById("canvas");
                c.width= 1200;
                c.height = 800;
                var ctx=c.getContext("2d");
                var imageObj1 = new Image();
                var imageObj2 = new Image();
                var imageObj3 = new Image();
                var imageObj4 = new Image();
                var imageObj5 = new Image();
                  
    
                imageObj1.src = document.getElementById("base").style.backgroundImage.slice(4, 
-1).replace(/["']/g, "");
                imageObj1.onload = function() {
                    console.log( "base loaded");
                    ctx.drawImage(imageObj1, 0, 0);
                    imageObj2.src = document.getElementById('korpus').style.backgroundImage.slice(4, -1).replace(/["']/g, "");
                    imageObj2.onload = function() {
                        console.log( "korpus loaded");
                        ctx.drawImage(imageObj2, 0, 0);
                        imageObj3.src = document.getElementById('sys').style.backgroundImage.slice(4, 
 -1).replace(/["']/g, "");
                        imageObj3.onload = function() {
                            console.log( "sys loaded");
                            ctx.drawImage(imageObj3, 0, 0, 1200, 800);
                            imageObj4.src = 
document.getElementById('fasad_r').style.backgroundImage.slice(4, -1).replace(/["']/g, "");
                            imageObj4.onload = function() {
                                console.log( "fasad_r loaded");
                                ctx.drawImage(imageObj4, 0, 0, 1200, 800);
                                imageObj5.src = 
document.getElementById('fasad_l').style.backgroundImage.slice(4, -1).replace(/["']/g, "");
                                imageObj5.onload = function() {
                                    console.log( "fasad_l loaded");
                                    ctx.drawImage(imageObj5, 0, 0, 1200, 800);
                                    
                                              var img = c.toDataURL("image/png");



                                              //document.querySelector('.kupe_image').src=img;
                                              
 //document.querySelector('.kupe_image').classList.remove("hidden");
                                              //document.write('<img src="' + img + '" width="1200" 
  height="800"/>');
                   };};;};};};
                   
                            
    }