canvas animation requestAnimationFrame

gistfile1.txt

function nug()
{
	var panel = function()
	{
		this.tap = function(context, rect, x, y)
		{
			if (func && this.rect.hitest(x, y))
				func();
			escape();
		}

		this.draw = function(context, rect, user)
		{
			var dashLen = 220, dashOffset = dashLen, speed = 5, y = rect.y+rect.height/2,
				txt = "STROKE-ON CANVAS", x = rect.width/2, i = 0;

			context.globalAlpha = 2/3;
			  var a = new FillPanel("black")
			  a.draw(context, rect, 0);

			context.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
			context.lineWidth = 5; context.lineJoin = "round"; 
			context.strokeStyle = context.fillStyle = "white";

			(function loop() 
			{
			  context.clear();
			  context.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
			  dashOffset -= speed;                                         // reduce dash length
			  context.strokeText(txt[i], x, y);                               // stroke letter

			  if (dashOffset > 0) 
				requestAnimationFrame(loop);             // animate
			  else 
			  {
				context.fillText(txt[i], x, y);                               // fill final letter
				dashOffset = dashLen;                                      // prep next char
				x += context.measureText(txt[i++]).width + context.lineWidth * Math.random();
				context.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
				context.rotate(Math.random() * 0.005);                         // random rotation
				if (i < txt.length) 
					requestAnimationFrame(loop);
			  }
			})();
		}
	}

	var h = 100
	nagham.entity.panel = new panel()		
	nagucnvctx.show(new rectangle(0,0,window.innerWidth,window.innerHeight));			
	nagham.entity.panel.draw(nagucnvctx, new rectangle(0,(window.innerHeight-h)/2,
		window.innerWidth,h), 0);		
}