Javascript 以HTML5响应画布文本为中心

我正在使用以下功能允许应用程序用户在画布照片上插入文本。它的工作原理与预期一样，文本在接近边缘时会收缩，但如果文本不大于画布，我无法确定如何将文本居中

var canvas4 = document.getElementById("canvas4");
        var ctx4 = canvas4.getContext("2d");

        canvas4.width = $(window).width();
        canvas4.height = $(window).height();

        var txt = value,
            tw,
            oc, octx;
        ctx4.font = '40px sans-serif';
        ctx4.fillStyle = 'blue';
        ctx4.textBaseline = 'top';
        ctx4.globalAlpha = 0.50;

        tw = ctx4.measureText(txt).width;

        if (tw > canvas4.width - 20) {
                oc = document.createElement('canvas');
                octx = oc.getContext('2d');
                oc.width = tw;
                oc.height = parseInt(ctx4.font, 10) * 1.2;
                octx.font = '40px sans-serif';
                octx.textBaseline = 'top';
                octx.fillText(txt, 0, 0);
                ctx4.drawImage(oc, 10, canvas4.height - 100, canvas4.width - 20, (canvas4.width - 20) / tw * oc.height);
        } else {
            ctx4.fillText(txt, 10, canvas4.height - 100);
        };

我尝试过文本对齐，例如

ctx4.textAlign='center，canvas4.width/2，canvas4.height-100'

ctx.fillText("Your text here",canvas.width/2, canvas.height/2); 

我没有使用canvas元素的经验。但这对你有帮助
 只需要一个单词，
“中心”
。剩下的则放在
fillText
调用中

ctx4.textAlign = 'center';
ctx4.fillText(txt, canvas4.width / 2, canvas4.height - 100);

将
textAlign
设置为
“center”
将使文本的中心显示在
fillText
调用中指定的点上。如果该点在画布上居中，则整个文本将在画布上居中。
将textAlign设置为“居中”，将使文本从屏幕左侧开始。谢谢。。。我想我已经试过了，但我想我弄糟了一些东西，因为它按照你解释的那样工作，这节省了我提出的解决方案的额外计算。选择这个作为最佳答案。我不认为将x和y设置为画布大小的一半对我有帮助。。。因为我已经设置了那些没有预期结果的。我认为需要对tw（measureText）宽度和画布宽度进行一些计算。我只是不太懂数学，我知道了。。。我觉得有点傻：解决办法是将画布的大小减半，然后减去文本宽度的一半。ctx4.fillText（txt，canvas4.width/2-tw/2，canvas4.height-100）；
var canvas4 = document.getElementById("canvas4");
        var ctx4 = canvas4.getContext("2d");

        canvas4.width = $(window).width();
        canvas4.height = $(window).height();

        var txt = value,
            tw,
            oc, octx;
        ctx4.font = '40px sans-serif';
        ctx4.fillStyle = 'blue';
        ctx4.textBaseline = 'top';
        ctx4.globalAlpha = 0.50;

        tw = ctx4.measureText(txt).width;

        if (tw > canvas4.width - 20) {
                oc = document.createElement('canvas');
                octx = oc.getContext('2d');
                oc.width = tw;
                oc.height = parseInt(ctx4.font, 10) * 1.2;
                octx.font = '40px sans-serif';
                octx.textBaseline = 'top';
                octx.fillText(txt, 0, 0);
                ctx4.drawImage(oc, 10, canvas4.height - 100, canvas4.width - 20, (canvas4.width - 20) / tw * oc.height);
        } else {
            ctx4.fillText(txt, 10, canvas4.height - 100);
        };