CanvasにdrawImageで描写した画像をtoDataURLで取得したい

Question

複数のcanvasを別のcanvas上でdrawImageを使って結合し、結合したcanvasのbase64を取得してサーバーに送信、png画像として保存したいのですが結合したcanvasのbase64がうまく取得できません。
base64っぽい文字列は取得できているのですが、保存した画像を見ると真っ白になっています。

let c = document.getElementById("canvas");
let ctx = c.getContext("2d");
let y = 0;//結合する画像のcanvasでの表示位置

//結合に使用するcanvasの大きさを設定
$("#canvas").attr({ height: ($("#img").height() * items.length) });//高さは保存した全ページを縦に表示できる高さにする
$("#canvas").attr({ width: $("#img").width() }); 

_.forEach(items, (data) => {//itemsに結合したいcanvasのデータが格納されている
                let img = new Image();
                img.src = data.imageData;//結合したいcanvasのbase64
                img.onload = function () {
                    ctx.drawImage(img, 0, y);
                    y += $("#canvas").height();
                }
            });

result =  c.toDataURL("image/png");

色々試したところ、最後のbase64の取得を5秒待って実行されるようにすると正常に画像が保存できました。

setTimeout(function () {
       result = c.toDataURL("image/png");
},5000)

おそらくdrawImageでの描写が完全に終わる前に、base64を取得していたのが原因だと思われますが、
描写が完全に終わってからtoDataURLを実行する方法はあるのでしょうか？
上記のように5秒も待ってしまうと処理が遅くなりますし、待ち時間を短くすると画像の描写が完全に終わる前にbase64を取得してしまうことがあるかもしれないので、そのようなイベントやメソッドがあればいいのですが見つかりませんでした…