Harsh artifacts of canvas sharpness
I am experimenting with canvas stroke text and I noticed a strange artifact on some letters when using a large stroke line width.
The problem is present with different fonts, sometimes on the same letters (but it really depends on the font family / style).
The snippet is as simple 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 also link an image of how it is displayed in my browsers:
Is this something common, and am I such a clumsy guy that I didn't understand (it goes away if you increase the font size enough), or is there even more?
source to share
Set the lineJoin
context property to bevel
or round
(whichever is best) Or store it in miter
and set the property to miterLimit
a low enough 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 property lineJoin
then this is a good place to start:
https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/lineJoin
source to share