CanvasRenderingContext2D: letterSpacing プロパティ

CanvasRenderingContext2D.letterSpacing はキャンバス API のプロパティで、テキストを描画する際の字間を指定します。

これは CSS の letter-spacing プロパティに相当します。

値

文字間隔を CSS <length> のデータ形式の文字列で指定します。 既定値は 0px です。

このプロパティを使用して、間隔を取得したり設定したりすることができます。 不正な値や解析不可能な値を設定しても、プロパティ値は変更されません。

例

この例では、"Hello World "というテキストを3回表示し、それぞれの用途で文字間隔を変更するために letterSpacing プロパティを使用しています。 間隔はプロパティの値を使用して、それぞれの場合ごとに表示されます。

HTML

html
<canvas id="canvas" width="700"></canvas>

JavaScript

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

ctx.font = "30px serif";

// Default letter spacing
ctx.fillText(`Hello world (既定値: ${ctx.letterSpacing})`, 10, 40);

// Custom letter spacing: 10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);

// Custom letter spacing: 20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);

結果

仕様書

Specification
HTML Standard
# dom-context-2d-letterspacing

ブラウザーの互換性

BCD tables only load in the browser

関連情報