为何Canvas文本设置(0,0)坐标未显示在左上角？

这是因为Canvas绘制文本时，fillText的y坐标对应的是文本基线的位置，不是文本块的左上角。默认的文本基线是alphabetic（也就是字母的基线，比如小写字母x的底部水平线）。

当你把y设为0时，这条基线刚好落在Canvas的顶部边缘，而文本的主体部分（比如大写字母H的顶部）是在基线的上方，也就是y坐标小于0的区域——这部分超出了Canvas的可视范围，所以你看不到文本。

而设y=50时，基线在y=50的位置，你用的是30px的字体，文本高度大概在30px左右，所以文本顶部的y坐标大概在50-30=20的位置，完全处于Canvas内部，自然能正常显示。

如果想让文本左上角对齐到(0,0)，可以手动修改文本基线为top，代码示例如下：

const canvElem = document.createElement("canvas");
canvElem.style.border = "1px solid black"
const ctx = canvElem.getContext("2d");
ctx.font = "30px Arial";
ctx.textBaseline = "top"; // 将基线设为文本顶部
ctx.fillText("Hello World", 0, 0);

document.body.appendChild(canvElem)

内容的提问来源于stack exchange，提问作者SopMe