くんくるりんと円をくるくる

完全な円でなく、円弧をも描けるのです。

context.arcTo(x1, y1, x2, y2, radius)

さて、円弧です。
結構これもややこしくて、直前の座標と直線でつながる円弧を作成する際に使用するようで。
開始点から、x1y1を経由してx2y2へ向かう。
で、経由するときに、radius(円の半径)分ぐにゃっと曲がって伸びていく的な感じ。
使い勝手がよう分からん(；´Д｀)

var canvas1 = document.getElementById('canvas01');
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 新しいパスを開始する
  context1.beginPath();
  // 100 30の位置に筆を置く
  context1.moveTo(10,30);

  // 制御点を150 70にセットし、曲線の終点を200 30に設定する
  context1.arcTo(130, 150, 220, 70, 80);

  // 線引いちゃう
  context1.stroke();
}

context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )

円を描きます。
引数は若干アレなので、説明もいれましょう

x

円の中心点のx軸の位置です。

y

円の中心点のy軸の位置です。

radius

円の半径

startAngle

円弧の開始角度

endAngle

円弧の終了角度

anticlockwise

円弧の作成方向
反時計回り（true）
時計回り（false）で指定（初期値はfalse）

var canvas2 = document.getElementById('canvas02');
// なんかねーここでwidth height設定してなかったら楕円になっちゃう
canvas2.width = 200;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  // 新しいパスを開始する
  context2.beginPath();

  // 角度の設定を別変数でやる(引数に直接指定してもOK)
  // 角度はラジアンが単位となり、[度数÷180×π]を行う必要がある
  // JSの場合πに関しては、Math.PIで取得できるのでそれを使用します
  var startAngle = 0 * Math.PI / 180;
  var endAngle = 360 * Math.PI / 180;
  context2.arc(25, 25, 20, startAngle, endAngle, true);

  // 線引いちゃう
  context2.stroke();
}

context.rect(x, y, w, h)

四角を描きます。
てめぇさっきやっただろこのやろう
と言いたい所ですが。さっきやったのは、描画まで一気にやるタイプ。
きちんとパスを作成しての方法になります。
やることは一緒なんですけどね

var canvas3 = document.getElementById('canvas03');
canvas3.width = 200;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  // 新しいパスを開始する
  context3.beginPath();
  
  // 四角のパス生成
  context3.rect(25, 25, 20, 20);

  // 線引いちゃう
  context3.stroke();
}