Canvasでマーキー

JavaScript

　お世話になっております。

　今日はCanvasタグ+JavaScriptを使ってマーキーを書いてみました。
　最近HTML5が気になっているので、その練習です。
　
　以下、ソースです。

<html>
  <head>
	<style type="text/css">
	  canvas {
	    background-color: #FFF;
	  }
	</style>
	<script type="text/javascript">
var G = {
  canvas: null,
  ctx: null,
  width: 0,
  height: 0,

  drawMarquee: function(text, x, y) {
    setTimeout(function(text, x, y){
      if(x < text.length * -10){
        return function(){
          G.drawMarquee(text, G.width, y);
        };
      }
      return function() {
        G.ctx.clearRect(0, 0, G.width, G.height);
		G.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
		G.ctx.fillText(text, x + 2, G.height - 18, G.width);
		
        G.ctx.fillStyle = 'rgba(0, 0, 0, 1)'
        G.ctx.fillText(text, x, G.height - 20, G.width);
        G.drawMarquee(text, x - 2, y);
      };
    }(text, x, y), 30);
  },

  init: function() {
    G.canvas = document.getElementsByTagName('canvas')[0];
    G.width = new Number(G.canvas.getAttribute('width'));
    G.height = new Number(G.canvas.getAttribute('height'));
    G.ctx = G.canvas.getContext('2d');
    G.ctx.font = '20px san-serif';

    G.drawMarquee('This program is written for @sakesoup. ', G.width, G.height);
  }
}
	</script>
  </head>
  <body onLoad="G.init();">
	<canvas id="myCanvax" width="500" height="100"></canvas>
  </body>
</html>

以上