CanvasRenderingContext2D: fillText() メソッド

text

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

x

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

y

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

maxWidth 省略可

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

なし (undefined)。

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

HTML

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

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

JavaScript

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

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

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

JavaScript

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

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

結果

• テキストの描画
• CanvasRenderingContext2D
• CanvasRenderingContext2D.strokeText()