[JavaScript]canvas 要素で遊ぶで作成したスクリプトのメインルーチンは 29 行目からの _update という関数です。

  _update : function(angle)
  {
    var self = this;
    var prev = self.angle * Math.PI / 180;
    var theta = angle * Math.PI / 180;
    var field = document.getElementById(self.name);
    if (!field || !field.getContext) return;
    var context = field.getContext("2d");
    // clear the previous draw
    context.rotate(- prev);
    context.clearRect(0,0,self.w,self.h);
    context.rotate(prev);
    context.drawImage(self.image, (self.w - self.image.width)/2, (self.h - self.image.height)/2);
    if (!Browser.isWinIE)
    {
      context.clearRect(0,self.h,self.w,self.h); // (*1)
      context.clearRect(-self.w,0,self.w,self.h); // (*1)
    }
    var x = (self.w / 2) - ((self.w / 2) * Math.cos(theta) - (self.h / 2) * Math.sin(theta));
    var y = (self.h / 2) - ((self.w / 2) * Math.sin(theta) + (self.h / 2) * Math.cos(theta));
    context.translate(x,y); // (*2)
    context.rotate(theta);
    self.angle = angle;
  },

Canvas を使うには、まず canvas 要素を DOM で取得して、コンテキスト上に Canvas のメソッドを使って描画するのが基本になります。

rotate メソッドを使うと、コンテキストの内容を回転させることが出来ます。

上の図で、右側の赤い四角が実際に描画される内容になります。canvas 要素のサイズなどは rotate によって変化しません。Canvas の中身 (コンテキスト) だけが回転します。

「canvas 要素で遊ぶ」のサンプルでは、回転してもイメージ全体が表示されるように、canvas 要素の大きさを大きめに確保するようにしています。

コード内の (*1) の部分では、イメージの左側と下側を消去しています。

これは時計回りで回転するイメージの残像が残らないようにするためです。Internet Explorer を除外しているのは、ExplorerCanvas で負の座標軸を使うとエラーになるためです。

[2008.02.28 追記]追試したところ、そんなことはありませんでした。ExplorerCanvas では、座標そのものが無視されるようです。複数回呼び出すのがエラーの原因かもしれません。

コード内の (*2) の部分では、translate メソッドを使って、Canvas のコンテキストをずらしています。

rotate メソッドでは、左上が回転軸となります。そのため、その前に translate でイメージの中心が回転軸となるようにしています。

イメージは canvas 要素の中心に置かれているので、中心の座標が回転によってどのぐらいずれるかを (*2) の行の直前で計算しています。

[2008.02.28 追記]_update 内で、context.rotate(- prev); のように回転したコンテキストを元に戻す操作を行っていますが、これは必要ありません。