画像と図形が一回で表示されません。再読み込みすると表示されまが、一回でどちらも表示させたいのです。原因は何でしょう？

Question

たいてい、はじめに図形しか表示されず、再読み込みすると図形と画像が一緒に表示されます。
一回でどちらも表示させたいのですが、原因がわかりません。宜しくお願い致します。

<div id="sintai_zu"> <canvas id="canvas_sintai_zu" width="" height=""></canvas> <script type="text/javascript">

var sintai_zu = null;
var canvas_sintai_zu = null;
var g_sintai_zu = null;
var $id = function(id){ return document.getElementById(id); };

var sintai_zu = $id("sintai_zu");
var canvas_sintai_zu = $id("canvas_sintai_zu");
var g_sintai_zu = canvas_sintai_zu.getContext("2d");

var img9 = new Image();
var IMG_COOLMAN9 = "kenkou00.svg";

img9.src = IMG_COOLMAN9;

function getSize0(){

canvas_sintai_zu.width = sintai_zu.offsetWidth;
canvas_sintai_zu.height = canvas_sintai_zu.width;

g_sintai_zu.drawImage(img9, 0, 0, canvas_sintai_zu.width, canvas_sintai_zu.height);

g_sintai_zu.beginPath();
g_sintai_zu.arc(canvas_sintai_zu.width0.3,canvas_sintai_zu.height0.3,canvas_sintai_zu.width0.1,0,Math.PI2);
g_sintai_zu.fillStyle = "rgba(169,169,169,1)";
g_sintai_zu.fill();

}

window.addEventListener("resize", function(){
getSize0();
});

window.addEventListener("DOMContentLoaded", function(){
getSize0();
});
</script>

</div>

Answer 1

このイベントトリガーが原因ではないでしょうか？説明を読むと

最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

Window: DOMContentLoaded イベント