Issue With TextSize() and StrokeWeight

[Bogdan740]

I don't know ifthis is happening due to the dis proportionality of strokeWeight() and textSize() but there is a problem with "A" in particular where it has a weird extra triangle at the top of the "A". You can check the enclosed file for a picture and p5.js sketch which shows the issue.

ISSUE EXAMPLE RUNABLE.zip

[TanviKumar]

The error can be replicated in the p5.js Web Editor with just the sketch code.

Increasing the ratio of testSize to strokeWeight helps reduce the size of the weird triangle, so it does seem to be an issue with proportionality.

[vipulrawat]

It's not a problem with p5.js.This thing happens with native canvas elements.
Also, the extra triangle's size and visibility highly depend on the typeface you are using.

Example: Using sans typefaces removes those extra triangle as sans doent have serifs (feet)

You may want to check this for reference.
In p5.js, you can use some good sans typefaces like textFont('Georgia'); this will remove the issue of extra triangle.

[limzykenneth]

This is a known issue (#3035), it is related to the default miter limit set by the Canvas API. For now you can access the underlying canvas and set the miter limit on there.

PS. @vipulrawat Georgia is a serif typeface

[vipulrawat]

Oh yes. Sorry, I think I missed this thing then. Also in Canavs API using only Georgia is solving the issue but in p5 both Georgia and Helvetica solved the issue. Then the miter limit is real solution by setting something like this

var context = canvas.getContext('2d');
context.miterLimit = 2 ; // default is 10