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

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

構文

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

引数

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

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 の変更個所をその場で確認できます:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

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

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 3.5 (1.9.1) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.9.1) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,