javascript - 为什么canvas图片合成不成功？-PHP中文网问答

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            *{  
                margin:0;  
                padding:0;  
            }  
            .center{  
                text-align: center;  
            }  
  
        </style>  
    </head>  
    <body>  
        <p class="center">  
            <img src="1.jpg" alt="" />  
            <img src="2.png" alt="" />  
        </p>  
        <button onclick="date()">生成</button>  
        <p id="imgBox" style="width:1000px;height:800px;">  
        </p>  
    </body>  
    <script>  
        var data=["1.jpg","2.png"],base64=[];  
        function date(){  
            var Mycanvas=document.createElement("canvas"),  
                ct=Mycanvas.getContext("2d"),  
                len=data.length;  
                Mycanvas.width=640;  
                Mycanvas.height=386;  
                ct.rect(0,0,Mycanvas.width,Mycanvas.height);      
                ct.fillStyle='#fff';  
                ct.fill();  
                function draw(n){  
                    if(n<len){  
                        var img=new Image;  
                        img.crossOrigin = 'Anonymous'; //解决跨域  
                        img.src=data[n];  
                        console.log(data[n]);  
                        img.onload=function(){  
                            ct.drawImage(this,0,0,640,386);  
                            draw(n+1);  
                        }  
                    }else{  
                        base64.push(Mycanvas.toDataURL("image/png"));  
                        document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">';  
                    }  
                }  
                draw(0)  
                
        } 
    </script>  
</html>
结果两张图片却没有合成成功，这是为什么呢？
理论上应该是这样的