JavaScriptでcanvasに文字を描画する方法

2018/12/23 (更新日：2019/06/25)

前回の記事「ブラウザで画像ファイルを選択した時にプレビュー表示する方法」でHTML5で実装されたcanvasについて触れたので、ついでにcanvasで文字描画する例を紹介します。

いきなり完成品

はい、サンプルコードどん！

JavaScriptでcanvasに文字描画する例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>canvasへの文字描画</title></head>
<body onload="loadImage('preview');">
<p><canvas id="preview"></canvas></p>
<p>
<input type="text" id="canvas_text" value="我輩は犬である">
<button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
</p>

<script>
//キャンバスに画像を描画する
function loadImage(id)
{
	//画像を読み込んでImageオブジェクトを作成する
	var image = new Image();
	image.src = 'canvas.jpg';
	image.onload = (function () {
		//画像ロードが完了してからキャンバスの準備をする
		var canvas = document.getElementById(id);
		var ctx = canvas.getContext('2d');
		//キャンバスのサイズを画像サイズに合わせる
		canvas.width = image.width;
		canvas.height = image.height;
		//キャンバスに画像を描画（開始位置0,0）
		ctx.drawImage(image, 0, 0);
	});
}
//キャンバスに文字を描く
function drawText(canvas_id, text_id)
{
	var canvas = document.getElementById(canvas_id);
	var ctx = canvas.getContext('2d');
	var text = document.getElementById(text_id);
	//文字のスタイルを指定
	ctx.font = '32px serif';
	ctx.fillStyle = '#404040';
	//文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
	ctx.textBaseline = 'center';
	ctx.textAlign = 'center';
	//座標を指定して文字を描く（座標は画像の中心に）
	var x = (canvas.width / 2);
	var y = (canvas.height / 2);
	ctx.fillText(text.value, x, y);
}
</script>
</body>
</html>

実行例

サンプルの解説

初期処理部分

loadImageでImageオブジェクトを作成し、サンプル写真(canvas.jpg)をセット
サンプル写真がロードされたらcanvasのサイズを合わせて画像を描画

[文字を描く]ボタン押下部分

canvasの2Dコンテキストを取得（これはもうこういうものと覚えたほうが早い）
コンテキストのフォントスタイルを指定（px指定やem指定などCSSと同じ）
文字の配置を指定要素の中のどの位置に配置するか、ではなく、座標指定した際、文字列のどこを中心点とするかの指定と考えたほうがわかりやすいかも。BaselineとAlignをtop/left指定すれば文字列の左上の座標を指定するという意味だし、centerの場合は文字列の中心点を座標指定するという意味。
座標を指定して文字を描く今回は文字列の中心点を基準としたため、x/y座標は画像の中心点を指定。そうすることで画像のど真ん中に中央寄せで文字列が描画される。