ここでは、四角形と円のシェイプを用意しました。これらの他にも、シェイプは用意されています。ここで主なものについて整理しておきましょう。

●四角形シェイプ「Rectangle」
サンプルで使いましたね。四角形のシェイプです。これには以下のような属性が用意されています。

x――横位置を指定します。
y――縦位置を指定します。
width――横幅を指定します。
height――高さ（縦の幅）を指定します。

●正円シェイプ「Circle」
これもサンプルで使いました。正円を表示するシェイプです。四角形とは属性が少し異なっています。

centerX――中心の横位置を指定します。
centerY――中心の縦位置を指定します。
radius――半径を指定します。

●楕円シェイプ「Ellipse」
これは、楕円を描くためのシェイプです。正円と異なり、縦と横の半径をそれぞれ別個に指定できます。

centerX――中心の横位置を指定します。
centerY――中心の縦位置を指定します。
radiusX――横方向の半径を指定します。
radiusY――縦方向の半径を指定します。

●円弧シェイプ「Arc」
円の一部分だけをキリッ取ったような円弧を描くものです。楕円の属性に加え、円弧の大きさ（角度）に関するものが追加されています。

centerX――中心の横位置を指定します。
centerY――中心の縦位置を指定します。
radiusX――横方向の半径を指定します。
radiusY――縦方向の半径を指定します。
startAngle――円弧の開始地点の角度（０～360の値）を指定します。
length――円弧の大きさを角度で指定します。
type――円弧の種類です。ROUND（中心から切り取る）、CHORD（円弧の両端を直線で結ぶ）、OPEN（円弧の両端を閉じない）のいずれかを指定します。

●直線シェイプ「Line」
2点を結ぶ直線を描画するシェイプです。開始地点と終了地点の属性が必要です。

startX――開始地点の横位置を指定します。
startY――開始地点の縦位置を指定します。
endX――終了地点の横位置を指定します。
endY――終了地点の縦位置を指定します。

●シェイプ全般に関する属性
この他、全てのシェイプに共通して用意される属性というのもあるので、あわせて覚えておきましょう。基本的に、塗りつぶしや線分の情報が用意されています。線分関係は先端やジョイントの形状など非常に多くの属性があるのですが、とりあえず下の３つだけ覚えておけばいいでしょう。

fill――塗りつぶしの色を指定します。
stroke――線の色を指定します。
strokeWidth――線の太さを指定します。

――とりあえず、これらのものが使えるようになれば、基本的な図形は描けるようになります。実際にタグを書いて試してみましょう。