CanvasRenderingContext2D: textRendering プロパティ
CanvasRenderingContext2D.textRendering はキャンバス API のプロパティで、テキストを描画するときに何を最適化するかについての情報をレンダリングエンジンに提供します。
値は SVG の text-rendering (en-US) 属性（および CSS の text-rendering プロパティ）に相当します。
値
ブラウザーのエンジンへ渡す、テキストを描画するヒントです。 以下のいずれかです。
auto-
ブラウザーは、テキストを描画する際に、速度、読みやすさ、幾何学的な精度を最適化するタイミングについて、経験に基づいて推測します。
optimizeSpeed-
ブラウザーはテキストを描画する際、読みやすさや幾何学的精度よりも描画速度を重視します。 カーニングと合字を無効にします。
optimizeLegibility-
ブラウザーは、レンダリング速度や幾何学的精度よりも読みやすさを重視します。 これによりカーニングとオプションの合字が有効になります。
geometricPrecision-
ブラウザーは、描画速度や読みやすさよりも幾何学的な正確さを 重視します。 フォントのある側面（カーニングなど）は直線的に変倍するわけではありません。 変倍率が大きい場合、テキストの描画があまり美しくないことがありますが、サイズは期待通りになります（基盤のオペレーティングシステムを対応している最も近いフォントサイズに切り上げも切り下げもされません）。
プロパティは、値を取得または設定するために使用することができます。
例
この例では、textRenderingプロパティの対応している値をそれぞれ使用して、テキスト "Hello World "を表示しています。
また、プロパティを読み込むことで、それぞれの場合の値も表示されます。
HTML
<canvas id="canvas" width="700" height="220"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px serif";
// Default (auto)
ctx.fillText(`Hello world (default: ${ctx.textRendering})`, 5, 20);
// Text rendering: optimizeSpeed
ctx.textRendering = "optimizeSpeed";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 50);
// Text rendering: optimizeLegibility
ctx.textRendering = "optimizeLegibility";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 80);
// Text rendering: geometricPrecision
ctx.textRendering = "geometricPrecision";
ctx.fillText(`Hello world (${ctx.textRendering})`, 5, 110);
結果
仕様書
| Specification |
|---|
| HTML Standard # dom-context-2d-textrendering |
ブラウザーの互換性
BCD tables only load in the browser