html5 ball tele

<!DOCTYPE html>
	<head>
		<style>
			#myC{
				border:1px solid black;
			}
		</style>
		<script>
			var ctx;
			var x;
			var y;
			var t;
			var rad;
			function start(){
				var c = document.getElementById("myC");
				ctx = c.getContext("2d");
				changePos();
			}

			function drawCircle(){

				ctx.beginPath();
				ctx.fillStyle="red";
				ctx.arc(x,y,rad,0*Math.PI,2*Math.PI);
				ctx.stroke();
				ctx.fill();

				rad+=10;
				if(rad>50){
					clearTimeout(t);
					ctx.clearRect(0,0,800,600);
					changePos();

				}else{
					t = setTimeout("drawCircle()",1000);
				}
			}

			function changePos(){
				var listX = Array(150,65,235);
				var listY = Array(125,185,65);
				var idxX = Math.min(Math.round(Math.random()*3),2);
				var idxY = Math.min(Math.round(Math.random()*3),2);
				x = listX[idxX];
				y = listY[idxY];
				rad=10;
				t = setTimeout("drawCircle()",1000);
			}
		</script>
	</head>
	<body onload="start()">
		<canvas id="myC" width="300px" height="250px"/>
	</body>
</html>