<div>
  描画面↓<br>
  <canvas id="bg" width="640" height="120"></canvas><br>
  </div>
  <div>
  仮想画面↓<br>
  <canvas id="fnt" width="640" height="80"></canvas>
  </div>
  <input id="txt" value="(C)WorldWideSoftware">
  <button onclick="drawFnt()">文字を更新</button>
  <a href="font00src.html">ソースコードの確認</a>

  <script>
  //描画面の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //仮想画面の準備
  var cvsF = document.getElementById("fnt");
  var ctxF = cvsF.getContext("2d");

  //仮想画面に文字を描く
  function drawFnt() {
   tmr = 0;
   var txt = document.getElementById("txt");
   ctxF.clearRect(0, 0, 640, 80);
   ctxF.fillStyle = "#f0f0f0";
   ctxF.font = "48px monospace";
   ctxF.fillText(txt.value, 20, 60);
  }

  //メイン処理
  var tmr = 0;
  function mainProc() {
   var h, x, y;
   tmr ++;

   //文字の背景
   for(y = 0; y < 8; y++) {
    for(x = 0; x < 40; x++) {
     ctx.fillStyle = "rgb(0,"+(x*5)+","+(y*24)+")";
     ctx.fillRect(x*16, y*15, 16, 15);
    }
   }

   h = tmr%100;//表示する高さの計算
   if(h > 80) h = 80;
   //文字を上の部分から描画していく
   ctx.drawImage(cvsF, 0, 0, 640, h, 0, 20, 640, h);
  }

  drawFnt();
  setInterval(mainProc, 50);
  </script>