Canvas に Base64 の画像を差し込む時も image の onload を待つ必要がある

タイトルの通りなんですけども…。

var image = new Image();
images.src = "data:image/jpeg;base64,...";
 
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);

はダメで、

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
 
var image = new Image();
images.onload = function() {
  ctx.drawImage(image, 0, 0);
}
images.src = "data:image/jpeg;base64,...";

が正解です。 Base64 文字列じゃない普通の URL を渡すときは onload 待つのが自然なので当然そう書くと思うけど、 Base64 文字列の時も onload が必要というのは盲点でした。白くなって(しかも「時折」)びっくりしました。