CanvasRenderingContext2D.measureText（）は現在の変換で変更されますか？

Question

を呼び出す前に、.scale(2,2)をキャンバスに呼び出すと、画面の表示サイズを意味する "CSSピクセルでのテキストの先行幅（インラインボックスの幅）"がMDNによると、幅が2倍になります。しかし、Chromeのテストでは、.measureText()はキャンバスを拡大縮小しても変化しないことがわかりました。 .measureText()は、使用する文字列が同じであれば、別のキャンバスでその関数を呼び出しても同じものを返します。

私はMDNを読んでいないのですが、現代のブラウザはすべてChromeと同じように動作すると思いますか？私は事前レンダリングのためのオフスクリーンキャンバスを使用しようとしているが、オフスクリーンキャンバスの幅が、私は表示する必要がどのくらいのテキストによって決定される

：私はこの質問をしたのはなぜ

。したがって、オフスクリーンのキャンバスを作成する前に私のメインキャンバスで .measureText()と呼ぶことをお勧めします。

Answer 1

CSSピクセルは、実際の物理ピクセルの上に抽象化されたピクセルサイズ/単位です。ブラウザウィンドウを200％に拡大すると、100px CSSピクセルとして定義されたものは100px CSSピクセルになりますが、200物理ピクセルを占有します。

結果がCSSピクセルで返される場合、サイズは縮尺などの影響を受けないことを意味します。

カンバスの現在のトランスフォームに関係なく、フォントのサイズが同じであると仮定することをお勧めします。コンテキスト

そして、それは検証するのは簡単です：Firefoxので

var ctx = document.createElement("canvas").getContext("2d"); 
 
ctx.font = "20px sans-serif"; 
 
console.log("Scale 100%", ctx.measureText("WWW").width); 
 
ctx.scale(2,2); 
 
console.log("Scale 200%", ctx.measureText("WWW").width);

：ブリンクエンジンで

（ここではオペラ）：

IE11：

のように。スケール変換が適用されているにもかかわらず、サイズは同じです（ブラウザー間のわずかな相違は、ブラウザーが使用しているフォントエンジンとどのように計算/レンダリングするかによって異なります）。