皆さんこんばんわ。@kouhei_mitsuyaです。
今日はHTML5で新たに追加された要素として代表的な[Canvas]を使って簡単な図形をつくってみようと思います。

キャンバスの使用方法

まずcanvasタグを使用し幅と高さを持たせます。

<canvas id="canvas1" width="500" height="300"></canvas>

このキャンバスに対しjavascriptを用いて描写していきます。

次にcanvasが持つメソッドを使用して描画コンテキストを取得します。

//?
var canvas = document.getElementById('canvas1');
//?
var ctx = canvas.getContext('2d');

?のgetElementByIdというメソッドでHTMLのcanvas1というID名を指定した要素を参照し
?のContext('2d')でコンテキスト名を指定します。

では早速いくつか図形を描いてみます。

?左から10上から10の位置に、100の正方形を描く

context.beginPath();
context.fillRect(10, 10, 100, 100);

fillRectメソッドを使用すると塗りつぶした矩形を描画できます。
fillRect(x, y, width, height)x ,y で座標を指定し、width, heightで縦横サイズを指定します。

?矩形の枠線だけを描画

context.beginPath();
context.strokeRect(120, 10, 100, 50);

strokeRectメソッドを使用すると矩形の枠線だけを描画できます

?円を描画

context.arc(60, 170, 50, 0, Math.PI*2, false);
context.fillStyle = 'rgb(192, 80, 77)'; 
context.fill();

arcメソッドを使用すると円弧を描けます。書き方はarc(x, y, radius, startAngle, endAngle, anticlockwise)で座標を中心にradiusで半径を基準にさせstartAngleとendAngleで円弧の角度を決めます。そしてanticlockwiseで円弧の描画させる向きを真偽値で指定します。tureで反時計回りfalseで時計回りになります。
さらにfillStyleで塗りつぶす色を指定することも可能です。

また下記のようにrgbaフォーマットを指定することで透明度を指定することも可能です。
>|php|context.fillStyle = 'rgba(192, 80, 77 , 0.8)';|