Canvasにはいろんな機能が盛り沢山です。上記サイトに詳しく説明がありますのでじっくりとやる場合は参考になります。

このサイトには大きくインスタンスプロパティ、インスタンスメソッドとして分けて書いてあります。

プロパティはいろんな要素、部品的なもの、例えば文字関連、色などのスタイル関係の指定する方法が書かれています。メソッドは例えば"円を描く"というような命令、一発で何かができる命令が書いてあります。これらを組み合わせていろんなことができるようになります。

この中からよく使うかなというものも何個かを取り上げてみたいと思います。最初に四角を書いたので、同じように図形の円、"まる"を書く方法、インスタンスメソッドを使います。

arc()

まずCanvasを使う準備HTMLです。

<canvas id="canvas" width="150" height="150"></canvas>

JavaScriptです。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

これで準備は完了。

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

fillRect()ではこれだけで四角が描画されますが、arc()では

beginPath()とstroke()が必要です。

1 　beginPath()で描き始めを宣言
2　何らかの描画のための処理
3　stroke()

という流れになります。

次に円を描く命令です

arc(100, 75, 50, 0, 2 * Math.PI);

今回の円はX 座標は 100、 Y 座標は 75、半径は 50 です。円弧を一周させるには、 0 ラジアン（0°）の角度で始まり、 2π ラジアン（360°）の角度で終わります(論理値は省略)。

角度ですが、日常の生活では角度といえば360°というような度数法を使ってます。なのでラジアンで表す弧度法はあまり馴染みはありませんがプログラミングではよく使うことになります。

度数法と弧度法の関係は

度数法では円は360°です。これをラジアン(弧度法)では2πと表すことができます。以下のサイトでわかりやすく解説してあります。

JavaScriptで表すと

となります。