Canvas.FillTextメソッドが間違った座標を使用するように見えるのはなぜですか？

Question

私はそうのようなHTML、キャンバス上にテキストをレンダリングしています：あなたが見ることができるように、テキストは、32でレンダリングされることになって32しかし、いくつかの理由のために、文字列が高すぎると思われる

https://www.w3schools.com/code/tryit.asp?filename=FMSIQUFFO5PL

。

キャンバスの座標はキャンバス要素の左上隅から始まり、文字列の座標は文字列の左下隅で始まるからです。

どのように私はそれが予想される位置にテキストをレンダリングできるようにこの問題を回避するのですか？

Answer 1

デフォルトでは、垂直方向のテキスト配置（ベースライン）は、y座標のテキストの一般的な下部を使用する "アルファベット"に設定されています。

あなたは "トップ" にtextBaselineを設定することによって、この動作を変更することができます。

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.font = "32px Arial"; 
 
ctx.textAlign = "left"; 
 
ctx.textBaseline = "top"; // change baseline property 
 
ctx.fillText("Hello World", 32, 32);

<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>