回転しながら移動する図形

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

var x = 0.0;
var rot = 0.0;

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

	context1.save();
	context1.translate(x, 100);
	context1.rotate(Math.PI/4.0*rot);
	context1.fillStyle = "rgb(0, 255, 0)";
	context1.translate(-25, -25);
	context1.fillRect(0, 0, 50, 50);
	context1.restore();
	rot += 0.1;
	x += 0.3;
	if(x > canvas1.width) {
		x = 0.0;
	}
}
setInterval(rotateRect, 10);
</script>