JavaScript | Canvasにテキストを描画する方法
JavaScriptでCanvasに枠線なし、枠線ありしのそれぞれのテキストを描画する方法を紹介しています。
Canvasにテキストを描画する
JavaScriptでCanvasに各タイプ別のテキストを描画するサンプルコードになります。
左から枠線なし、枠線ありのテキストとなっています。
See the Pen JavaScript Canvas draw rect by yochans (@yochans) on CodePen.
HTMLは<canvas>要素にid「canvas」を指定しています。
<canvas id="canvas"></canvas>枠線なし、枠線ありそれぞれのタイプのテキストを描画します。
一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります（新しいパスを開始）。
このサンプルではテキストの描写には色付きテキストにfillText()メゾッド、アウトラインのテキストにstrokeText()メゾッドを利用しています。
それぞれ「fillStyle」「strokeStyle」でカラネームまたはrgb(a)にて色を指定可能です。
枠線の太さは「lineWidth」で指定する事ができます。
fillText()の場合。
context.beginPath(); // パスを開始
let text = 'Hello World'; // テキスト
context.fillStyle = 'deepskyblue'; // 文字色
context.font = "bold 24px Arial"; // 文字サイズ、フォント指定
context.fillText( text, x, y); // テキストを描画、座標strokeText()の場合。
context.beginPath(); // パスを開始
let text = 'Hello World'; // テキスト
context.strokeStyle = 'deepskyblue'; // 線の色
context.lineWidth = 4; // 線の幅
context.font = "bold 40px Arial"; // 文字サイズ、フォント指定
context.strokeText(text, x, y); // テキストを描画、座標サンプルコード
//コンテキストを取得
let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
//filText
context.beginPath();
let text = 'Hello World';
context.font = "bold 40px Arial";
context.fillStyle = 'deepskyblue';
context.fillText(text, 20, 50);
//strokeText
context.beginPath();
text = 'Hello World';
context.font = "bold 40px Arial";
context.strokeStyle = 'deepskyblue';
context.strokeText(text, 20, 100);