HTML 5 Canvas Example 1.1 - "draw" loop with requestAnimationFrame

<canvas width="600" height="600" id="mycanvas" />

<script type="text/javascript">
	
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext('2d');
	
	var x = 0;
	var y = Math.random()*canvas.width;
	var draw = function() {
		context.beginPath();
		// This is silly but it's what we have to do to get a random hex string
		context.strokeStyle='#'+(Math.random()*0xFFFFFF<<0).toString(16);
		context.moveTo(x,y);
		context.lineTo(canvas.width/2,canvas.height/2);
		context.stroke();
		x++;
		if (x > canvas.width) { x = 0; }
		y = Math.random()*canvas.width;
	};
				

	var animationLooper = function() {

		reqAnimFrame = window.mozRequestAnimationFrame    ||
					   window.webkitRequestAnimationFrame ||
					   window.msRequestAnimationFrame     ||
					   window.onRequestAnimationFrame
					   ;

		reqAnimFrame(animationLooper);

		draw();
	}
	
	window.addEventListener('load', animationLooper);
				
</script>