sprite rpg char html5

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

				ctx.clearRect(0,0,250,500);
				ctx.drawImage(img,x,y,32,64,0,0,250,500);
				x += 32;
				if(x==192){
					x=64;
				}
				setTimeout("start()",500);
			}
			function changeSide(){
				y+=64;
				if(y==256){
					y=0;
				}
			}
		</script>
	</head>
	<body onload="start()">
		<canvas id="myC" width="250px" height="500px" onclick="changeSide()"/>
		<img id="sprite" src="sprite.png"/>
	</body>
</html>