HTML5キャンバスのctx.fillText()は改行に対応していない！複数行テキストを描画する方法

fillText()メソッドは、キャンバス上に塗りつぶしテキストを描画するためのAPIです。しかし、このメソッドには改行文字（\n）を自動的に処理する機能がなく、改行を含む文字列をそのまま渡すと、すべてが1行のテキストとして描画されてしまいます。

fillText()で改行を実現する基本手法

改行されたテキストを描画したい場合は、文字列を改行文字の位置で分割し、fillText()を複数回呼び出して各行を個別に描画する必要があります。具体的には、split('\n')で文字列を行ごとの配列に変換し、ループ処理の中でY座標を行間分だけずらしながら1行ずつ描いていきます。

以下のコード例で実際の動作を確認できます。

var c = $('#c')[0].getContext('2d');
c.font = '12px Courier';

var str = 'first line \nsecond line...';
var a = 30;
var b = 30;
var lineheight = 15;
var lines = str.split('\n');

for (var j = 0; j < lines.length; j++)
  c.fillText(lines[j], a, b + (j * lineheight));

HTML（キャンバス要素）

<canvas id="c" width="200" height="200"></canvas>

CSS

canvas {
  background-color: #FFCE9E;
}

ポイント解説

• str.split('\n')：文字列を改行文字で分割し、各行を要素とする配列を作成します。
• lineheight：行間のピクセル幅を指定します。フォントサイズに応じて適切な値を設定しましょう。
• b + (j * lineheight)：ループのインデックスに応じてY座標を下方向へずらし、各行を順番に描画します。

このように、行間分だけY座標を加算しながら各ラインを描画することで、見た目上の改行を実現できます。チャット画面やログ表示など、キャンバス上で動的な複数行テキストを扱う場合に特に有効な手法です。