1. canvasの中に文字を書き込む方法

次の例では，canvasの中に文字を書き込んでいます．書かれた文字の座標が分かり易いように，ｘ，ｙ座標とも10ピクセルごとに方眼を書き込んであります．また，黒い点の座標は(20,30)，赤い点の座標は(20,70)です．

- 図1 -

図１の上の例は，

コンテキスト.font = "22px sans-serif";

コンテキスト.fillText("グラフィックス", 20, 30,100);

と書いた場合です．fillText()により，文字の中身が塗りつぶされたものになります．

コンテキスト.font = 値;

の値には，引用符に囲んで，スペース区切りで，CSSのfontプロパティと同じものを書き並べます．デフォルトでは，"10px sans-serif"になります．
プロパティ（を書く場合）は，font-style, font-weight → font-size → font-family の順に書く必要があります．

【例】　コンテキスト.font = 'italic bold 24px "Times New Roman"';

（Times New Roman のように空白を含む名前は，外側の引用符と異なる引用符で囲みます）

【書式】

コンテキスト.fillText(text, x, y, maxWidth)

•textには表示したい文字列を書きます．
•x, y は先頭の文字の左下端の座標になります．
•maxWidth は，最大の横幅を表しますが，省略することができます．maxWidthが書かれていて，文字列の横幅がmaxWidthよりも長くなった場合には，maxWidthまで（横幅だけが）均等に圧縮されます．

　この例では，グラフィックスという文字列が自然状態で100ピクセルよりも横長になるので，100ピクセルまで縮小されて，ちょうど10個の方眼に入るようになっています．
図１の下の例は，

コンテキスト.font = "30px serif";

コンテキスト.strokeText("文字の見本", 20, 70);

と書いた場合です．strokeText()により中抜き文字になります．

2. 数学座標になっている場合

- 図2 -

- 図3 -

図2は，数学で使われる座標としてｙ軸の正の向きを上にしたものです．
100×100のキャンバスに対して，コンテキスト.translate(50,50);により，原点を中央に平行移動した後，コンテキスト.scale(1,-1);により，ｙ座標の符号を逆にしたもの．
　ここで，コンテキスト.fillText("y", 0, 0);とすると，新しく座標の原点となった(0,0)にｙという文字が描かれますが，その文字は上下が反転したものになっています．赤の点が(0,0)でそこをベースラインとして，下に向かって書かれている．（なお，ｙという文字は，一部分がベースラインよりも下に出る．）
　数学座標として，グラフはｙ軸の正の向きを上にとりながら，文字は通常の見え方にするには，「文字を書くときだけ，再度コンテキスト.scale(1,-1);により，ｙ座標の符号を逆に戻す」とよい．
図3は，グラフを描画した後，コンテキスト.scale(1,-1);コンテキスト.fillText("y", 0, 0);としたもので，通常に読めるようになります．
図4は，上記の方法により，グラフの部分をコンテキスト.scale(20,-20);により，ｙ軸の正の向きを上にして描いた後，文字の部分をコンテキスト.scale(1,-1);コンテキスト.fillText();として，ｙ座標は符号を逆にして書いたものです．

- 図4 -

- 図5 -