フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 文字を描画する

canvasはテキストを画像として書き出すことができます。基本的な使用方法をメモしておきます。

文字を描画する
fillText ( text, x, y )
文字を描画します。
strokeText ( text, x, y )
文字の枠を描画します。内部は透明になります。
文字の色を指定する
fillStyle
文字の色を指定できます。値にはCSSと同じ色指定を使用できます。
strokeStyle
文字の枠線の色を指定できます。値にはCSSと同じ色指定を使用できます。
文字の大きさ、種類、太さ、行間を指定する
font
文字のスタイルを設定できます。値にはCSSのfontの設定がそのまま使用できます。
サンプル
var context = document.getElementById('canvas').getContext('2d');

// フォントの設定
context.font = '30px MS-Gothic bold';

// 色を指定
context.fillStyle = '#ff6600';
context.strokeStyle = '#0066ff';

// 文字を描画
context.fillText('test', 10, 20);
context.strokeText('test', 10, 50);