CanvasRenderingContext2D.fillText()

Canvas 2D API の CanvasRenderingContext2D.fillText() メソッドは、指定した位置 (x, y) にテキストを塗りつぶして描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。

テキストの輪郭線を描画するための CanvasRenderingContext2D.strokeText() メソッドもご覧ください。

構文

void ctx.fillText(text, x, y [, maxWidth]);

引数

text
現在の fonttextAligntextBaselinedirection の値を使用して描画するテキスト。
x
テキストの描画を始める、x 軸の座標。
y
テキストの描画を始める、y 軸の座標。
maxWidth 省略可
描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。

fillText メソッドの使用例

fillText メソッドを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

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

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

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

仕様

仕様書 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.fillText の定義
現行の標準  

ブラウザ実装状況

BCD tables only load in the browser

関連情報