canvas的drawImage

额，直接看码吧…

html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style>
            body{
                margin: 0;
                overflow: hidden;
            }
            #canvas{
                position: absolute;
            }
        style>
    head>
    <body>
        <canvas id="canvas">canvas>
        <script>
            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
            for(var i=0;i<=1;i++){
                var img=new Image();
                img.onload=function(){
                    ctx.drawImage(img,i*100,0,100,100);
                }
                img.src="img/map/2.svg";
            }
        script>
    body>
html>

照理说应该有两张一样的图片，但是…

img

它只显示了最后一张，试了很多遍，只要drawImage用到for循环里它就只显示最后一张
这是为啥，有啥解决方法吗…（这个只是我简化出来的一个例子，不能手动把for给拆成一大串

var img=new Image();
img.onload=function(){
for(var i=0;i<=1;i++){
ctx.drawImage(img,i*100,0,100,100);
}
}
img.src="img/map/2.svg";