HTML 5 Canvas Example 2 - "draw" loop with mouse interaction

<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 = 0;
	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; }
	};
	setInterval(draw,1000/30); // 30 x per second

	canvas.addEventListener('mousemove', function(evt) {
		//evt.clientX is x but in the entire window, not the canvas
		//evt.clientY is y
		
		// Get the canvas bounding rect
		var canvasRect = canvas.getBoundingClientRect(); 

		// Now calculate the mouse position values
		y = evt.clientY - canvasRect.top; // minus the starting point of the canvas rect
		// x = evt.clientX - rect.left;  // minus the starting point of the canvas rect on the x axis
	}, false);
	
</script>