渐变fillText在IOS中无法用泰语填充全文

如何解决渐变fillText在IOS中无法用泰语填充全文

我对泰语文本有疑问，找不到答案。我需要将此文本填充为带有渐变的泰语文本，但它无法填充底部字形，只能在 IOS 中使用。

这是我的简单代码：

<!DOCTYPE HTML>
<html>

<head>
    <Meta http-equiv="Content-Language" content="th" />
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Sarabun" rel="stylesheet">
    <style>
        body {
            margin: 0px;
            padding: 0px;
            font-family: 'Sarabun',sans-serif;
        }
    </style>
</head>

<body>
    <h1>ซื้หมุนรี</h1>

    <canvas id="myCanvas" width="300" height="700"></canvas>
    <canvas id="myCanvas1" width="300" height="700"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.font = "80px Sarabun";
        var gradient = ctx.createLinearGradient(0,80);
        gradient.addColorStop(0,"rgb(255,128)");
        gradient.addColorStop(1,153,51)");
        ctx.fillStyle = "#FF0000";
        ctx.fillStyle = gradient;
        ctx.strokeStyle = "#FF0000";
        ctx.linewidth = 1;
        ctx.fillText("ซื้หมุนรี",80);
        ctx.strokeText("ซื้หมุนรี",80);

        var canvas1 = document.getElementById("myCanvas1");
        var ctx1 = canvas1.getContext('2d');
        ctx1.font = "80px Sarabun";
        ctx1.fillText("ซื้หมุนรี",80);
    </script>
</body>

</html>