Css `context.textb基线='；中部'；`尝试在画布中垂直对齐文本时不起作用

为什么在我的简单示例中

textbrealine='middle'

不起作用？为什么我的文本被移到顶部

const size=100；
const canvas=document.getElementById（'canvas'）；
画布宽度=大小；
画布高度=尺寸；
const context=canvas.getContext（'2d'）；
context.font=“bold”+（大小*0.95）+“px Arial”；
context.fillStyle='blue'；
context.textAlign=“中心”；
context.textb基线='middle'；
context.fillText（'SO'，size/2，size/2）
画布{
边框：1px纯红；
}
我假设您希望在画布中垂直对齐文本

。画布中的对齐完全基于x和y值<代码>文本基线

将仅在y坐标附近的指定位置

对齐文本

运行此代码段以理解
const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
常量基线=[‘顶部’、‘悬挂’、‘中间’、‘字母’、‘表意’、‘底部’]；
ctx.font='36px serif'；
ctx.strokeStyle=‘红色’；
baselines.forEach（函数（基线、索引）{
ctx.textBaseline=基线；
设y=75+指数*75；
ctx.beginPath（）；
ctx.moveTo（0，y+0.5）；
ctx.lineTo（550，y+0.5）；
ctx.stroke（）；
ctx.fillText（'Abcdefghijklmnop（'+baseline+'），0，y）；
});
好的，在弄清楚瓶盖高度是多少后，我设法找到了一个适合我需要的解决方案（在画布上垂直居中大写字符）。我用这个计算了瓶盖高度比


const size=100；
const canvas=document.getElementById（'canvas'）；
canvas.width=canvas.height=size；
const context=canvas.getContext（'2d'）；
context.font=“bold”+（大小）+“px Arial”；
context.fillStyle='blue'；
context.textAlign=“中心”；
context.textb基线='挂起'；
常数capHeightRatio=0.72；//阿拉尔
context.fillText（'SO'，size/2，（size-（size*capHeightRatio））/2）
画布{
边框：1px纯红；
}
对齐取决于x和y值。这些“中间”设置将在y坐标值之间对齐谢谢，我明白了。我想我的下一个问题是，是否有可能找出显示字母的实际高度？我只使用大写字母，所以可能会简化一点。知道这个高度后，我可以根据需要使用
悬挂
或
字母
基线对齐。