Canvas.FillText 메서드가 잘못된 좌표를 사용하는 것 같습니다.

Question

내가 그렇게 같은 HTML-캔버스에 텍스트를 렌더링하고는 : 당신이 볼 수 있듯이

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

, 텍스트는 32, 32로 렌더링하지만 몇 가지 이유를 들어, 문자열이 너무 높은 표시하도록되어 .

Canvas의 좌표가 Canvas-Element의 왼쪽 위 모퉁이에서 시작하고 String의 좌표가 문자열의 왼쪽 아래 모퉁이에서 시작하기 때문에이 점은?

예상되는 위치에 정확히 텍스트를 렌더링 할 수 있도록이 문제를 해결하려면 어떻게합니까?

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>