html中遍历创建img标签只显示最后一张图

我是想从一幅图中裁剪出几张图片然后显示在页面。我利用canvas得到裁剪图的url之后，遍历创建img标签，最终只显示了最后一次裁取的图；

等一个大佬私我 解决问题有偿

想将裁剪的图片放在一个box里。。。

看看效果是不是层叠上去了

<div onclick="draw()">拼图</div>
        <script>
            let data = ['index_01.jpg', 'index_02.jpg'], newImgBase64 = [];
            function draw() {
                const c=document.createElement('canvas'),
                ctx=c.getContext('2d'),
                len=data.length;
                c.width = 200;
                c.height = 200;
                ctx.rect(0, 0, c.width, c.height);
                ctx.fillStyle = '#fff';
                ctx.fill();
                function drawing(n) {
                    if(n < len) {
                        let img = new Image;
                        img.src = data[n];
                        if(n == 1) {
                            ctx.drawImage(img, 100, 100, 200, 200);
                        } else {
                            ctx.drawImage(img, 0, 0, c.width, c.height);
                        }
                        drawing(n + 1); //递归
                    } else {
                        //最后拼成图片
                        newImgBase64.push(c.toDataURL("image/jpeg", 1));
                        console.log(newImgBase64[0])
                    }
                }
                drawing(0);
            }
        </script>