テキストの描画
サンプルの上の2行は、必要最低限の指定。描画したい文言と、描画位置のx,y座標を指定します。
デフォルトは、10px、sans-serif、textAlign=start、textBaseline=alphabetic、色は黒です。
↑ 3行目と4行目は、分かりやすいようにサイズを大きく（20pxに）して、色も変えてみました。
色指定は、図形と同じように、塗りは fillStyle、線は strokeStyle で指定します。
線幅（lineWidth）のデフォルトが1px なのがわかります。
function tDraw1() {
var ctx1 = document.getElementById('canvas1').getContext('2d');
/*テキスト描画の基本*/
ctx1.fillText('fillText("fillText",10,15)',10,15);
ctx1.strokeText('strokeText("strokeText",10,30)',10,30);
ctx1.font= '20px sans-serif';
ctx1.fillStyle = '#9FE4FE'
ctx1.strokeStyle = '#FEA7D6'
ctx1.fillText('fillText("fillText",10,60)',10,60);
ctx1.strokeText('strokeText("strokeText",10,85)',10,85);
}
1行目は fillText、2行目は strokeText で描画。
3行目は、この2つを同じ位置に重ねています。（下に strokeText、その上に fillText を）
function tDraw2() {
var ctx2 = document.getElementById('canvas2').getContext('2d');
/*フォントの太さ、サイズ、書体、色、線の太さなどの指定*/
ctx2.font= 'bold 40px Century Gothic';
ctx2.strokeStyle = '#00A3D9';
ctx2.lineWidth = 6;
ctx2.lineJoin = 'round';
ctx2.fillStyle = '#fff';
ctx2.fillText('fillText(text,x,y[,maxWidth])',15,55,520);
ctx2.strokeText('strokeText(text,x,y[,maxWidth])',15,115,520);
ctx2.strokeText('fillText on strokeText',15,175,520);
ctx2.fillText('fillText on strokeText',15,175);
}
「textAlignプロパティ」で、横方向（x）の表示位置を指定します。
デフォルト値は「start」。textAlign を指定しなければ start の位置になります。
function tDraw3() {
var ctx3 = document.getElementById('canvas3').getContext('2d');
/*テキストの指定*/
ctx3.font= 'bold 30px Century Gothic';
ctx3.fillStyle = '#666';
/*textAlignのサンプル*/
ctx3.textAlign = 'start';
ctx3.fillText('start',340,38);
ctx3.textAlign = 'end';
ctx3.fillText('end',340,72);
ctx3.textAlign = 'left';
ctx3.fillText('left',340,106);
ctx3.textAlign = 'right';
ctx3.fillText('right',340,140);
ctx3.textAlign = 'center';
ctx3.fillText('center',340,180);
}
「textBaselineプロパティ」で、縦方向（y）の表示位置を指定します。
デフォルト値は「alphabetic」。textBaseline を指定しなければ alphabetic の位置になります。
function tDraw4() {
var ctx4 = document.getElementById('canvas4').getContext('2d');
/*テキストの指定*/
ctx4.font= 'bold 20px Century Gothic,"Hiragino Kaku Gothic ProN"';
ctx4.fillStyle = '#fff';
ctx4.textAlign = 'center';
/*textBaselineのサンプル*/
ctx4.textBaseline = 'top';
ctx4.fillText('top_漢あmjk',120,60);
ctx4.textBaseline = 'hanging';
ctx4.fillText('hanging_漢あmjk',340,60);
ctx4.textBaseline = 'middle';
ctx4.fillText('middle_漢あmjk',560,60);
ctx4.textBaseline = 'alphabetic';
ctx4.fillText('alphabetic_漢あmjk',120,140);
ctx4.textBaseline = 'ideographic';
ctx4.fillText('ideographic_漢あmjk',340,140);
ctx4.textBaseline = 'bottom';
ctx4.fillText('bottom_漢あmjk',560,140);
}
「measureText()メソッド」で、文字列の幅をゲットして、テキストにアンダーラインや背景ボックスをつけてみます。
function tDraw5() {
var ctx5 = document.getElementById('canvas5').getContext('2d');
/*テキストの指定*/
ctx5.font= 'bold 20px sans-serif';
/*アンダーライン*/
var text = 'テキストにアンダーラインを描画する';
ctx5.fillStyle = '#008C22';
ctx5.textAlign = 'center';
ctx5.fillText(text,340,75);
var txw1 = ctx5.measureText(text);
ctx5.beginPath();
ctx5.moveTo(340-txw1.width/2,80);
ctx5.lineTo(340+txw1.width/2,80);
ctx5.strokeStyle = '#008C22';
ctx5.stroke();
/*背景ボックス*/
var text2 = 'テキストにピッタリサイズの背景ボックスをつける';
var txw2 = ctx5.measureText(text2);
/*先に背景ボックスを描画*/
ctx5.fillStyle = '#008C22';
ctx5.fillRect(340-txw2.width/2,120,txw2.width,20);
/*あんまりピッタリでもアレなので、5pxの線の四角形で囲んでみた*/
ctx5.strokeStyle = '#008C22';
ctx5.lineWidth = 5;
ctx5.strokeRect(340-txw2.width/2,120,txw2.width,20);
/*テキストを描画*/
ctx5.fillStyle = '#fff';
ctx5.textBaseline = 'middle';
ctx5.fillText(text2,340,130);
}
「背景ボックス」のソースの解説です。（アンダーラインのほうは「ほんっとに」の記事をみてください）
要点は、先に背景ボックスを描くこと。一番最後に「fillText」でテキストを描画していますよ。じゃないと文字が見えなくなるからね。
それから、上のソースの21行目、fillRectで四角形を描いてますが、
ctx5.fillRect(340-txw2.width/2,120,txw2.width,20); では、文字列にピッタリの四角形になります。
計算式をちょっと工夫すれば余白を作れるのですが面倒なので（笑）、まったく同じ位置にstrokeRectで線の四角形を描いて線幅を5pxにしています。実際は2.5pxはみ出した余白ができるというわけです。