Canvas stroke text sharp artifacts

Question

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?

Answer 1

Set the lineJoinproperty of the context to bevel or round(whichever looks the best to you) Alternatively keep it at miter and set the miterLimitproperty to a rather low value.

(function() {
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.font = 'bold 110px "Arial"';
    ctx.lineWidth = 26;
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 2; // fiddle around until u find the miterLimit that looks best to you.
    // or ctx.lineJoin = 'round';
    // or ctx.lineJoin = 'bevel';
    ctx.strokeStyle = '#a4ff11';
    ctx.strokeText('Water', 100, 100);
    
    ctx.fillStyle = '#ff0000';
    ctx.fillText('Water', 100, 100);
})();

<canvas id="canvas" width="800" height="800"></canvas>

If you want to know more about the lineJoin property then this is a good place to start: https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/lineJoin