Javascript 如何防止画布字体渲染中出现难看的尖峰？

当我在画布上绘制文本时，会出现丑陋的尖刺，如下所示：

请在此处尝试：

例如，在photoshop中，我得到以下信息：

代码只是一个经典的strokeText：

ctx.font = '20px Arial';
ctx.lineWidth = 15;
ctx.strokeStyle = '#fff';
ctx.strokeText('How to prevent ugly spikes?');

---

如果无法解决此问题，是否有任何解决方法？

尝试将line join设置为：

ctx.lineJoin = 'round';

还可以调整斜接限制：

ctx.miterLimit = 2;

---

回答得很好@Ken Fyrstenberg+1-这是一个JSFIDLE文件---:）谢谢@jonathan在我更新答案的同时，你的评论也来了。：）+1对于可怕的尖刺效果。。。