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

前回の記事「ブラウザで画像ファイルを選択した時にプレビュー表示する方法」で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>

実行例

canvasに文字描画する実行例

サンプルの解説

初期処理部分

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

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

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

実際に動くサンプルコード

[文字を描く]ボタンを押下すると画像に文字が埋め込まれます。

まとめ

前回解説したとおり、画像に文字を重ねるくらいのことはCSSで普通に出来ます。

なぜわざわざcanvasを使うかというと画像として扱えるから、ですね。

例えば上記の例だと犬の写真を右クリックして保存すると文字が入った状態の画像ファイルをダウンロードすることができます。

CSSではこうはいきません。

あぁ、でもcanvasを右クリックして保存できるのはChromeやFirefox等のモダンブラウザだけで、IE11はダメだったかも。

IE11でもcanvasの保存をする方法はあるので、それはまた別の機会に。