【Canvas】テキストを重ねて描画する

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

本記事では、Canvasでテキストを重ねて描画する方法をご紹介しています。

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

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

本記事で作成する内容

今回作成するのは、テキストを重ねて描画したCanvasです。下記のデモで内容をご確認いただけます。

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

テキストの描画については下記の記事でご紹介しております。Canvasでのテキストの描画について触れたことがない場合は、下記の記事を参考にしていただければと思います。

では本題に戻りまして、Canvasにテキストを重ねて描画する方法をご紹介していきます。

Canvasを設置する

まずはベースとなるCanvas_APIを設置します。Canvasは下記のようにcanvas要素で設置することができます。widthとheight属性の値は環境に合わせて変更してください。

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

Web API のCanvas APIでは、HTMLのcanvas要素とJavaScriptを用いて描画する内容を指定することができます。Canvasの設置は完了しましたので、続いてJavaScriptで描画するテキストを指定します。

JavaScriptでテキストを重ねて描画する

Canvasの設置が完了したら、JavaScriptで描画するテキストの内容を指定します。今回は本サイト名を単語にわけて描画します。テキストの表示位置については、各テキストのX軸を少しずらし、それぞれが少し重なるようにY軸に位置を調整します。

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

ctx.font = "40px Times New Roman";
ctx.fillText("Into", 0, 40);

ctx.font = "40px Times New Roman";
ctx.strokeText("the", 20, 60);

ctx.font = "40px Times New Roman";
ctx.fillText("Program", 40, 80);

以上でCanvasにテキストを重ねて描画することができます。要素の裏側に設置したり、セクションのタイトルにしたりと応用が利きそうなので、ぜひ使ってみてくださいね。

最後に

Canvasは本当に奥が深くて、サイトで使用するアニメーションはもちろん、テトリスやレースといったブラウザ上で実行するゲームも作ることができます。気になった方はGoogle等で調べてみて、Canvasの沼にハマってくださいね！

以上、Canvasでテキストを重ねて描画する方法のご紹介でした！