動くアニメーションの上に文字を表示させたい

Question

bodyの中に以下のプログラムが入ってるのですが、これを背景アニメーションに設定してその上に文字を表示させたいです。
今は画像のようにコインが上から降ってくるところまでいっています。
どうすればよいのでしょうか？

<canvas id="cvs" width="800px" height="500px" style="background-color:#white;"></canvas>
<script>
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var imgCnt = 25;          // 描画する画像の数
var aryImg = [];          // 画像の情報を格納
var cvsw = 800;           // canvasタグに指定したwidth
var cvsh = 500;           // canvasタグに指定したheight
var imgBaseSizeW = 15;    // 画像の基本サイズ横幅
var imgBaseSizeH = 18.5;  // 画像の基本サイズ立幅
var aspectMax = 1.5;      // アスペクト比計算時の最大値
var aspectMin = 0.5;      // アスペクト比計算時の最小値
var speedMax = 2;         // 落下速度の最大値
var speedMin = 0.5;       // 落下速度の最小値

// 画像の読み込み
var img = new Image();
img.src = "okane.png";
img.onload = flow_start;

// 画像のパラメーターを設定
function setImagas(){
  var aspect = 0;
  for(var i = 0;i < imgCnt;i++){
    // 画像サイズに掛けるアスペクト比を0.5~1.5倍でランダムで生成
    aspect = Math.random()*(aspectMax-aspectMin)+aspectMin;
    aryImg.push({
      "posx": Math.random()*cvsw,   // 初期表示位置x
      "posy": Math.random()*cvsh,   // 初期表示位置y
      "sizew": imgBaseSizeW*aspect, // 画像の横幅
      "sizeh": imgBaseSizeH*aspect, // 画像の縦幅
      "speedy": Math.random()*(speedMax-speedMin)+speedMin,　// 画像が落ちていく速度
    });
  }
}

// 描画、パラメーターの更新
var idx = 0;
function flow(){
  ctx.clearRect(0,0,cvsw,cvsh);
  for(idx = 0;idx < imgCnt;idx++){
    aryImg[idx].posy += aryImg[idx].speedy;
    ctx.drawImage(img, aryImg[idx].posx, aryImg[idx].posy, aryImg[idx].sizew , aryImg[idx].sizeh);
    // 範囲外に描画された画像を上に戻す
    if(aryImg[idx].posy >= cvsh){
      aryImg[idx].posy = -aryImg[idx].sizeh;
    }
  }
}

function flow_start(){
  setImagas();
  setInterval(flow,10);
}
</script>

Answer 1

ブヒーブヒヒヒ。下記でどうでしょうか？

<canvas id="cvs" width="800px" height="500px" style="background-color:#white;position:absolute;z-index:-1"></canvas>

<div style="position:absolute;z-index:1">重ねる文字</div>