[HTML][JavaScript]canvasタグの透明度を連続的に調節する

昨日のエントリーでは、canvasの透明度を調整する方法を書きました。

今日は、連続的に変更する方法について。

<script>
jQuery(function($){
  var nAlpha = 1;
  var canvas = document.getElementById("hoge");
  var context = canvas.getContext("2d");
  context.fillRect(0,0,100,100);

  function animation(){
    nAlpha = nAlpha - 0.1;
    if(nAlpha < 0){
      nAlpha = 1;
    }

    context.clearRect(0,0,100,100);
    context.globalAlpha = nAlpha;
    context.fillRect(0,0,100,100);

    nTimerid = setTimeout(function(){
      clearTimeout(nTimerid);
      animation();

    },200);
  }

  animation();

});
</script>
<canvas id="hoge" width="200" height="200" style="border:solid 1px red;"></canvas>