【Canvas】fillText()とstrokeText()でテキストを描画する

こんにちは、Ryohei（@ityryohei）です！

本記事では、CanvasでfillText()とstrokeText()を使ってテキストを描画する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Canvasを設置する

ベースとなるCanvasを設置します。Canvasはcanvas要素で指定した位置に設置することができます。

<canvas id="canvas" width="500" height="100"></canvas>

以上でCanvasの設置は完了です。

CanvasはJavaScriptでコンテンツを描画します。動作確認の意味もかねて、canvas要素を取得し、図形の基本となる四角形を描画してみます。

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

ctx.fillStyle = "#00c2bc";
ctx.fillRect (0, 0, 50, 50);

ページを読み込むなどして実行結果を確認してみてください。下記のように緑色の四角形が表示されていれば問題ありません。

See the Pen by ryohei (@intotheprogram) on CodePen.

Canvasを使用する準備ができましたので、本題のテキストの描画方法についてご紹介します。

Canvasにテキストを描画する

Canvasでテキストを描画するには下記の2通りの方法があります。

• fillText()
• strokeText()

詳しく見ていきましょう。

fillText()

fillText()は引数に指定した座標にテキストを塗りつぶして描画するメソッドです。構文は下記の通りです。

構文

fillText(text, x, y [, maxWidth])

引数には下記の値を指定します。

引数	値
text	描画するテキストを指定します。
x	テキストの描画を始めるx軸(横方向)の座標を指定します。
y	テキストの描画を始めるy軸(縦方向)の座標を指定します。
maxWidth	値を指定するとmaxWidthの幅に合わせてテキストを縮小して表示することができます。省略可能な引数です。

fillText()を使用してテキストを描画してみます。省略可能な引数ですが、maxWidthの有無による描画内容の違いも確認してみましょう。

maxWidthを省略

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

ctx.fillText("Into the Program", 0, 25);

See the Pen 7113-2 by ryohei (@intotheprogram) on CodePen.

maxWidthを指定

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

ctx.fillText("Into the Program", 0, 25, 50);

See the Pen by ryohei (@intotheprogram) on CodePen.

maxWidthを指定した方では引数の値に応じて描画されるテキストが縮小されていることが確認できます。

strokeText()

fillText()がテキストを塗りつぶすメソッドに対して、strokeText()はテキストの輪郭のみを描画するメソッドです。構文は下記の通りです。

構文

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

引数には下記の値を指定します。fillText()と同様の引数です。

引数	値
text	描画するテキストを指定します。
x	テキストの描画を始めるx軸(横方向)の座標を指定します。
y	テキストの描画を始めるy軸(縦方向)の座標を指定します。
maxWidth	値を指定するとmaxWidthの幅に合わせてテキストを縮小して表示することができます。省略可能な引数です。

strokeText()を使用してテキストを描画してみます。 strokeText() でもmaxWidthの有無による描画内容の違いを確認してみます。

maxWidthを省略

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

ctx.strokeText("Into the Program", 0, 25);

See the Pen by ryohei (@intotheprogram) on CodePen.

maxWidthを指定

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

ctx.strokeText("Into the Program", 0, 25, 50);

See the Pen by ryohei (@intotheprogram) on CodePen.

わかりにくいですが、テキストの輪郭のみが描画されています。maxWidthを指定した場合はきちんと縮小表示されています。

以上がCanvasでテキストを描画する2つの方法になります。基本的にこれらを駆使してテキストを描画します。

ただ、上記方法で描画されるテキストはデフォルトのままではフォントサイズが小さかったりしますよね。なのでこれらをテキストのスタイルを指定することができるfontプロパティを使って、変更してみたいと思います。

テキストのスタイルを変更する

fillText()やstrokeText()で描画するテキストのスタイルを変更する方法にfontプロパティがあります。構文は下記の通りです。

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

ctx.font = value;

valueの部分に文字列を指定します。指定することができる値は下記の通りで、CSSのfontと同様です。

font-family	フォントを指定します。
font-size	フォントのサイズを指定します。
font-stretch	フォント一文字辺りの幅を指定します。
font-style	フォントのスタイル（筆記体、斜体等）を指定します。
font-variant	フォントのスモールキャップ（英語の小文字を大文字で表示するか等）を指定します。
font-weight	フォントの太さを指定します。
line-height	フォントの行間を指定します。

上記のプロパティはCSSで見慣れている方がほとんどだと思います。

では実際にfontに値を指定してテキストを描画してみます。先ほど少し見えにくかったstrokeText()で描画するテキストのフォントサイズを大きくして、フォントファミリーを指定してみます。

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

ctx.font = "50px Times New Roman";
ctx.strokeText("Into the Program", 0, 50);

実行結果は下記の通りです。フォントサイズが大きくなり、テキストの輪郭が見やすくなったかと思います。

See the Pen by ryohei (@intotheprogram) on CodePen.

CSSのfontがそのまま使用できるので、下記を参考に色々試してみてくださいね。

https://developer.mozilla.org/ja/docs/Web/CSS/font

最後に

Canvasでは、一般的にWeb上で表示したいほとんどの情報を取り扱うことができます。本記事では代表例としてテキストにフォーカスを当てましたが、テキストの表示する際にアニメーション等も組み合わせるとユニークな動きを付けることも可能です。これから多くの情報を共有していければと思います！

以上、CanvasのfillText()とstrokeText()でテキストを描画する方法のご紹介でした！