textBaseline
text 처리하는 부분에서 baseline 이야기가 나왔는데 Canvas 내에서 기준 좌표점 0,0 을 baseline으로 잡아주기 때문에 translate를 사용해야 한다는 이야기.
<canvas id="myCanvas" width="400" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px serif";
ctx.translate(0, parseFloat(ctx.font));
ctx.strokeText("Hello World 굴려굴려",0,0);
아마 translate를 보여주기 위한 코드가 아닌가 싶고 textBaseline을 사용하면 baseline의 위치(?)를 조정할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px serif";
ctx.textBaseline = "top";
ctx.strokeText("Hello World 굴려굴려",0,0);
한글은 영어와 기준선 처리가 다르기 때문에 실제 편집 디자인을 하는 분들은 영어와 한글의 폰트 크기나 기준선을 따로 작업한다고 합니다.
참고