CanvasRenderingContext2D: fillText() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2DfillText() はキャンバス 2D API のメソッドで、指定した座標にテキスト文字列を描画し、その文字を現在の fillStyle で塗りつぶします。オプションの引数で、描画されるテキストの最大幅を指定すると、ユーザーエージェントは、この幅に収まるようにテキストを圧縮したり、フォントサイズを縮小したりします。

このメソッドは現在のパスを変更することなく直接描画を行うため、その後の fill()stroke() の呼び出しには影響を与えません。

テキストのフォントやレイアウト構成は、 fonttextAligntextBaselinedirection の各プロパティで定義されたものを使用して描画が行われます。

メモ: 文字列の文字の輪郭を描画するには、そのコンテキストで strokeText() メソッドを呼び出してください。

構文

js
fillText(text, x, y)
fillText(text, x, y, maxWidth)

引数

text

文字列で、このコンテキストに描画するテキスト文字列を指定します。テキストは、 fonttextAligntextBaselinedirection の設定を使用して描画されます。

x

テキストの描画を始める、x 軸の座標をピクセル単位で指定します。

y

テキストの描画を始める、y 軸の座標をピクセル単位で指定します。

maxWidth 省略可

描画するテキストの最大幅をピクセル数で指定します。指定しなかった場合、テキストの幅は制限されません。この値を指定すると、ユーザーエージェントはカーニングを調整したり、水平方向に縮小されたフォントを選択したり(利用可能であるか、または品質を損なうことなく生成できる場合)、フォントを縮小したりして、指定した幅にテキストを収めます。

返値

なし (undefined)。

塗りつぶしたテキストを描画

この例では、 "Hello world" という語を fillText() メソッドで描画します。

HTML

まず、描画するためのキャンバスが必要です。このコードでは、幅 400 ピクセル、横 150 ピクセルのコンテキストを作成します。

html
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

この例の JavaScript コードは次のようになります。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);

このコードでは、 <canvas> への参照を取得し、その 2D グラフィックコンテキストへの参照を取得します。

そして、 font を高さ 50 ピクセルの "serif" (ユーザーの既定のセリフ付きフォント)に設定し、 fillText() を呼び出して座標 (50, 90) からテキスト "Hello world" を描画しています。

結果

テキストの大きさの制限

この例は "Hello world" という文字列を、 140 ピクセルの幅に制約して描画します。

HTML

html
<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);

結果

仕様書

Specification
HTML Standard
# dom-context-2d-filltext-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報