Canvasでの縁取りの方法

Question

Canvasで縁取りの文字を描画したいのですが、いろいろ調べてみてもそのような機能がないようです。
自力で、strokeTextを使って縁を作ることもやりましたが、フチが内側に来てしまい、うまくいきません。

そのような関数はないのでしょうか。また、ないのならどのような方法を使ってフチを作ればいいでしょうか。
教えていただけると嬉しいです。

Answer 1

ふつう、縁取りの後に中を背景色で塗ります。(透過したい場合面倒です。ブレンドモードなど使うとよいかも)

let ctx = document.getElementById("cnv").getContext('2d');
ctx.font = "100px 'Impact'";
ctx.lineWidth = "6";
ctx.lineJoin = "miter";
ctx.miterLimit = "5"
ctx.strokeText("HelloWorld縁", 50, 150);
ctx.strokeText("HelloWorld縁+塗", 50, 350);
ctx.fillStyle = "#ffcccc"
ctx.fillText("HelloWorld塗", 50, 250);
ctx.fillStyle = "#ffffff"
ctx.fillText("HelloWorld縁+塗", 50, 350);

codepen