canvasを回転して描画[解説]
canvasを回転して描画することができます。 画像を回転して表示た例です。

最初に回転する原点の座標を決めます。
context.translate(100, 100);
キャンバスを回転します。
context.rotate(angle * TO_RADIANS);
画像を描画します。
context.drawImage(imgUfo, -(imgUfo.width / 2), -(imgUfo.height / 2));

回転の原点と画像の関係は次のようになります。

全ソースです。 

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>画像を拡大縮小して描画</title>
	<style>
	#canvas{
		background-color: aquamarine;
	}	
	</style>

	<script type="text/javascript">
		var context = null;
		var canvas = null;
		var angle = 0;
		var imgUfo = new Image();
		imgUfo.src = "ufo.png";
		const TO_RADIANS = Math.PI/180;

		function timerTask() {

			context.fillStyle = "aquamarine";
			context.fillRect(0, 0,canvas.width, canvas.height);
			// コンテキストを保存する
			context.save();
			// 回転の中心に原点を移動する
			context.translate(100, 100);
			// canvasを回転する
			context.rotate(angle * TO_RADIANS);

			context.drawImage(imgUfo, -(imgUfo.width / 2),  -(imgUfo.height / 2));

			// コンテキストを元に戻す
			context.restore();

			angle += 10;
			if(angle >= 360){
				angle = 0;
			}	


		}

		function init() {
			//描画コンテキストの取得
			canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');
			window.setInterval(timerTask, 100);
		}
	</script>

</head>

<body onLoad="init()">
	<canvas width="250" height="250" id="canvas"></canvas><br>
	解説は<a href="canvas_rotate_.html">こちら</a>。
</body>

</html>