CanvasRenderingContext2D: strokeText() メソッド

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.

CanvasRenderingContext2D の strokeText() メソッドはキャンバス 2D API の一部であり、テキスト文字列の文字の輪郭を指定した座標に描画します。オプションの引数で、描画されるテキストの最大幅を指定することができます。ユーザーエージェントはこの幅を実現するために、テキストを圧縮したり、フォントサイズを縮小したりします。

このメソッドは現在のパスを変更することなく、直接キャンバスに描画を行います。その後の fill() や stroke() には影響を与えません。

メモ: 輪郭線のみを描くのではなく、テキスト文字を塗りつぶすのであれば fillText() メソッドを使用してください。

構文

strokeText(text, x, y)
strokeText(text, x, y, maxWidth)

引数

text: 文字列で、このコンテキストに描画するテキスト文字列を指定します。テキストは font, textAlign, textBaseline, direction で指定された設定を使用して描画されます。
x: テキストを描き始める位置の X 座標です。
y: テキストを描き始める位置の Y 座標です。
maxWidth 省略可: テキストを描画する際の最大幅を指定します。指定しなかった場合、テキストの幅に制限はありません。しかし、この値を指定すると、ユーザーエージェントはカーニングを調整したり、より水平方向に縮小されたフォントを選択したり（利用可能であるか、または品質を損なうことなく生成できる場合）、または指定した幅にテキストを収めるためにより小さいフォントを使用したりします。

返値

なし (undefined)。

例

テキストの輪郭線の描画

この例では、 "Hello world" という語を strokeText() メソッドを使用して描きます。

HTML

最初に、描画先のキャンバスが必要です。このコードは 400 ピクセル幅、 150 ピクセル高のコンテキストを生成します。

html

<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.strokeText("Hello world", 50, 90);

このコードは <canvas> への参照を受け取り、そこから二次元グラフィックコンテキストへの参照を取得します。

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

結果

テキストの大きさの制限

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

HTML

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.strokeText("Hello world", 50, 90, 140);

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser