Weird 'Horns' on text outlines for M's and W's

[jacob2512]

I've noticed weird artifacts occurring only on 'M's and 'W's
The test code is at
https://jsfiddle.net/6vUVr/114/
(screenshot attached)

I've tried multiple settings to no avail;
and it gets worse with a higher 'outline' value.

Could somebody explain what is going on, and how i can fix it?

Thanks
Jacob

[lannymcnie]

This is due to the miter limit of strokes (relevant SO post). This effect is possible with raw canvas APIs, but it is not currently supported in the Text class. The miterLimit, lineJoin, lineCap, and lineDash properties would have to be added to the Text class.

This support should be added, so thanks for raising the issue. Hopefully we can come up with an approach shortly.

If you want to patch the Text class in the short term, you can add this line to the _prepContext method:

    ctx.miterLimit = 2; // Or whatever gives you the right look.

Note that this will affect all Text instances.

[jacob2512]

Thanks for your patch... it works great!
This will be enough to tide me over until there is an official patch.

[lannymcnie]

Relevant SO post: http://stackoverflow.com/questions/42497171/html5-canvas-setting-context-on-resize

[gskinner]

Just pushed a fix for this, setting the miterLimit to 2.5 on text draws, though it was way more metal with the horns!