【Canvas入門5】HTML5のCanvasでテキストを描画する方法

今回はCanvasを使ってテキストを描画する方法を紹介していきたいと思います。

canvasでテキストを描画する方法

Canvasを使ってテキストを描画するための書き方は下記になります。

html

<canvas id="canvas"></canvas>

javascript

let canvas = document.getElementById('canvas');
let cv = canvas.getContext('2d');

//テキスト描画
cv.font = '30px sans-serif';
cv.fillStyle = 'rgba(0, 0, 255)';
cv.fillText('CANVAS TEXT', 40, 40);

//テキスト描画（輪郭）
cv.strokeStyle = '#333';
cv.font = 'bold 30px sans-serif';
cv.lineWidth = 2;
cv.strokeText('CANVAS TEXT', 40, 80);font

補足

canvasでテキストを描画するためにはfillTextやstrokeTextメソッドを使います。

fillText

通常のテキストを描画する場合はfillTextメソッドを使います。

strokeText

テキストの輪郭のみを描画したいときはstrokeTextメソッドを使います。

font

'bold 30pt sans-serif'

lineWidth

輪郭線の太さはlineWidthプロパティで指定することができます。

サンプル