如何在内部将文本绘制为空

Question

我正在尝试在“画布元素”上绘制一些带有“阴影”的文本，即文本内部为空，周围为黑色。我想让这种黑色非常“沉重”，所以我使用了lineWidth，但是我在图像中（尤其是在M上）可以看到一种奇怪的效果。

我应该如何进行？

我的代码：

 var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);

 <canvas id="c"></div>

Answer 1

这只是Arial字体的问题；）试试Calibri，问题就会消失了！

我从ctx.font = "24px Arial";变为ctx.font = "24px Calibri";

的唯一一行

测试here。

更新（也已修复）：

这也将解决Arial的问题：

 var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineJoin = 'round';     //ADD THIS LINE
 ctx.miterLimit = 2;         //& THIS LINE
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);