日記はここで終わっている

テキスト。もちろんcanvasにも文字だって表示できます。

context.fillText(text,x,y[,maxWidth])

fillがついていますので、塗りつぶし文字です。
塗りつぶし文字ってなんだかあまり聞かないですが、つまり普通の文字です
テキストの描画は現在のパスには影響を与えません。また、影・透明度・切り抜き・合成の対象となります。

text

表示したいテキストをここに記述します。

x y

テキストを表示させる座標位置を指定してあげましょう。

maxWidth

これはオプションですが、設定することで、テキストの表示幅を指定することができます。
テキストは折り返されるわけではなく、縮小されます。

var canvas1 = document.getElementById('canvas01');
canvas1.width = 400;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  context1.beginPath();
  context1.font = "30px 'ＭＳ ゴシック'";
  context1.fillText('テキスト１領域指定',50,50,70);
  context1.fillText('テキスト２領域指定しない',0,90);
}

さてさて、こんな感じですね。
テキスト装飾やらフォントは追ってやります。
注目いただきたいのは、文字列じゃなくあくまでも描画なわけで。つまり、コピペできないしソース表示してもない
保護したいテキスト、歌詞なんかは重宝しますね。

context.strokeText(text,x,y[,maxWidth])

同じ文字ですが、少し違う方法、塗りつぶしとくれば、輪郭。つまり中抜き文字ってことですかね
引数に関してはfillTextと一緒です。

var canvas2 = document.getElementById('canvas02');
canvas2.width = 400;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  context2.beginPath();
  context2.font = "30px 'ＭＳ ゴシック'";
  context2.strokeText('テキスト１領域指定',50,50,70);
  context2.strokeText('テキスト２領域指定しない',0,90);
}

フォントの指定

デモでも使ってたりしますが、フォントの指定等をある程度できるように用意されています。

context.font=pram

色々なフォント指定を行うことができます。
指定内容はCSSのfontと同じです。

var canvas3 = document.getElementById('canvas03');
canvas3.width = 400;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  context3.beginPath();
  context3.font = "bold large/150% 'Gyate_FONT'";
  context3.fillText('テキスト１',150,50);
  context3.font = "bold 30px 'メイリオ'";
  context3.fillText('テキスト２',50,100);
}

context.textAlign=pram

その名の通り、テキストの位置を指定することができます。

start: 開始揃え(デフォルト)
end: 終了位置揃え
left: 左揃え
right: 右揃え
center: 中央揃え

var canvas4 = document.getElementById('canvas04');
canvas4.width = 400;
canvas4.height = 200;
if (canvas4.getContext) {
  var context4 = canvas4.getContext('2d');
  context4.beginPath();
  context4.textAlign = "start";
  context4.fillText('テキスト_start',150,30);
  context4.textAlign = "end";
  context4.fillText('テキスト_end',150,60);
  context4.textAlign = "left";
  context4.fillText('テキスト_left',150,90);
  context4.textAlign = "right";
  context4.fillText('テキスト_right',150,120);
  context4.textAlign = "center";
  context4.fillText('テキスト_center',150,150);
}

context.textBaseline=pram

テキストのベースラインを設定することができます。

top: emスクエアの上端

hanging: 「आ」のような文字が固定される位置

middle: emスクエアの中間

alphabetic (デフォルト): アルファベットのベースライン（初期値）

ideographic: 漢字など表意文字のベースライン

bottom: emスクエアの下端

var canvas5 = document.getElementById('canvas05');
canvas5.width = 1090;
canvas5.height = 200;
if (canvas5.getContext) {
  var context5 = canvas5.getContext('2d');
  context5.beginPath();
  context5.font = "bold 20px 'Gyate_FONT'";
  context5.textBaseline  = "top";
  context5.fillText('あアAa1_top',10,30);
  context5.textBaseline  = "hanging";
  context5.fillText('あアAa1_hanging',130,30);
  context5.textBaseline  = "middle";
  context5.fillText('あアAa1_middle',300,30);
  context5.textBaseline  = "alphabetic";
  context5.fillText('あアAa1_alphabetic',460,30);
  context5.textBaseline  = "ideographic";
  context5.fillText('あアAa1_ideographic',660,30);
  context5.textBaseline  = "bottom";
  context5.fillText('あアAa1_bottom',880,30);
  context5.moveTo(0, 15);
  context5.lineTo(1090, 15);
  context5.moveTo(0, 25);
  context5.lineTo(1090, 25);
  context5.moveTo(0, 32);
  context5.lineTo(1090, 32);
  context5.stroke();
}

context.measureText(text)

このテキストを入れたらどんくらいの長さになるん？を測定できるます。
戻り値はオブジェクトで返ってきます。
TextMetrics.widthで取得できます。