画布描边文字锋利的文物(Canvas stroke text sharp artifacts)

 我正在尝试画布笔划文本，当我使用大笔划线宽时，我注意到某些字母上有一个奇怪的神器。 
 
 问题出现在同一个字母上有时会出现不同的字体（但它实际上取决于字体系列/样式）。 
 
 代码片段尽可能简单明了： 
 
 
 
 
 
  
(function() {
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.font = 'bold 110px "Arial"';
    ctx.lineWidth = 26;
    ctx.strokeStyle = '#a4ff11';
    ctx.strokeText('Water', 100, 100);
    
    ctx.fillStyle = '#ff0000';
    ctx.fillText('Water', 100, 100);
})();
 
  
<canvas id="canvas" width="800px" height="800px"></canvas>
 
 
 
 
 
 我还链接了一个在我的浏览器中渲染的图像 ： 
 
 
 这是一个常见的东西，我是一个笨拙的家伙，我还没弄明白（如果你充分增加字体大小它会消失）还是更多呢？ 

I am experimenting with canvas stroke text and I have noticed a strange artifact on some letters when using a large stroke line width.
 
The issue is present with different fonts sometimes on the same letters (but it really depends on the font family / style).
 
The snippet is as straightforward as possible:
 
 
 
 
 
  
(function() {
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.font = 'bold 110px "Arial"';
    ctx.lineWidth = 26;
    ctx.strokeStyle = '#a4ff11';
    ctx.strokeText('Water', 100, 100);
    
    ctx.fillStyle = '#ff0000';
    ctx.fillText('Water', 100, 100);
})();
 
  
<canvas id="canvas" width="800px" height="800px"></canvas>
 
 
 
 
 
I am also linking an image of how it renders in my browser(s):
 
 
Is this something common and I am such a clumsy guy that I haven't figure it out (it does go away if you increase the font size sufficiently) or is there more to it?

原文：https://stackoverflow.com/questions/31224680