移動する図形

<canvas id="canvas1" width=300 height=300></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");

var x = 0.0;
var y = 100.0;
var prey = 100.0;

function transRect() {
	context1.clearRect(0, 0, canvas1.width, canvas1.height);

	context1.fillRect(0, prey, canvas1.width, 2);

	context1.save();
	context1.translate(x, y);
	context1.fillStyle = "rgb(0, 255, 0)";
	context1.fillRect(0, 0, 100, 10);
	context1.restore();
	x += 2.0;
	if(x > canvas1.width) {
		x = -100.0;
		prey = y;
		val = (Math.random()-0.5);
		if(val > 0.0) {
			val += 0.3;
		}
		if(val < 0.0) {
			val -= 0.3;
		}
		y += val*canvas1.height;
		if(y > canvas1.height - 10) {
			y -= canvas1.height - 10;
		}
		if(y < 0) {
			y += canvas1.height;
		}
	}
}
setInterval(transRect, 10);
</script>