【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

Canvasでテキストを重ねて描画したいんだけど、どうすればいいんだろう?

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

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

本記事で作成する内容

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

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

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

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

Canvasを設置する

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

<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でテキストを重ねて描画する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍