canvasの使い方1/2(線の描画と単色塗りつぶしまで)

散々他のブログで書かれていますが、メモとして残します。
基本的に以下の手順で描画させます。

• canvas要素を使い、描画させる場所を作ります。

※canvas要素で囲まれた文字は、使用できない場合のみ表示されます。

<canvas id="draw" width="300" height="300">お使いのブラウザはcanvas要素に対応していません</canvas>

• 四角形の描画

function draw(){
//描画させたいcanvas要素のノードを取得する
var canvas = document.getElementById("draw");
//描画のための2Dコンテキストオブジェクトを取得する
//※将来的に3Dなどが追加される予定だが、今のところ2Dのみ
var context = canvas.getContext("2D");
/*
塗りつぶしの■を描画
fillRect()を使用する。
?描画開始点のxを指定
?描画開始点のyを指定
?横の長さを指定
?縦の長さを指定
*/
context.fillRect(10,10,100,100);
/*
□に切り抜く
clearRectを使用する。
引数はfillRectと同じ
*/
context.clearRect(20,20,200,200);
/*
□の枠線を描画
strokeRect()を使用する。
引数はfillRectと同じ
*/
context.strokeRect(30,30,300,300);
}

• 線の描画

function draw(){
//描画させたいcanvas要素のノードを取得する
var canvas = document.getElementById("draw");
//描画のための2Dコンテキストオブジェクトを取得する
//※将来的に3Dなどが追加される予定だが、今のところ2Dのみ
var context = canvas.getContext("2D");
//beginPath()でパス指定を開始する
context.beginPath();
//moveTo(x,y)で描画の開始点を指定する
context.moveTo(10,10);
//lineTo(x,y)で終点を指定する
context.lineTo(30,30);
//strokeで描画させる
context.stroke();
/*
〜〜〜ここまでで斜めの線が引ける〜〜〜〜
moveTo/lineToを複数回使用することで、複雑な描画も可能になる
以下は△を描画
*/
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(50,200);
context.closePath();
context.stroke();
//色付きの△を描画するには、closePath()からstrokeの間でスタイルなどを指定します
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.lineTo(50,200);
context.closePath();
//線の色
context.strokeStyle = "#000000";
//線の太さ
context.lineWidth = 3;
//塗りつぶす色
context.fillStyle = "red";
//塗りつぶし
context.fill();
context.stroke();