【javascript】canvasにimg画像(アニメーションgif)を重ねて中央寄せする

たいした話じゃないけど、やりたかったことは
canvasへの描画処理を開始する前の事前処理(準備)中にローディング画像みたいのを出したかったのですが、
canvasにグルグル回るアニメーションgifを描画すると1枚目の静止画となってしまうのでcanvasとimgタグを重ねて対応しました

<div id="content"></div>

<script>
// canvasと画像のサイズ
var width_canvas = 320,
      height_canvas = 180;

var width_image = 50;
var height_image = 30;

// canvas生成
var canvas = document.createElement("canvas");
canvas.width = width_canvas;
canvas.height = height_canvas;
canvas.style.position = "relative";

// img生成して画像読み込み
var image = new Image();
image.id = "img";
image.src = "//example.com/img.gif";
image.style.position = "absolute";
image.style.left = canvas.width/2 - width_image/2;
image.style.top = canvas.height/2 - height_image/2;
image.style.width = width_image;
image.style.height = height_image;

// canvasとimgを画面に追加
var content = document.getElementById("content");
content.appendChild(canvas);
content.appendChild(image);
</script>

実際にはcanvasの準備ができたら
image.style.display = "none"みたいな感じで非表示にする処理も必要になります

以上です