large strokeWeight on text renders spikes

[aferriss]

When using stroked text with a strokeWeight greater than 2 or 3, you start to see odd peaks jutting out of the characters. This is especially prevalent on spiky capitals (A, M, V, W), but also happens on lowercase letters too.

This issue only effects stroke with a strokeJoin of MITER— the other modes render fine. I think this is not really a p5 issue, but really just a canvas rendering bug. Additionally as you increase the strokeWeight at some point the peaks will pop to some even larger size. It seems to be different for every character.

It can be fixed by setting the miterLimit of the drawingContext to some low number like 2 (the browser defaults it to 10). Here's an example showing the gitches, as well as the fix.

I'm happy to make a PR with this fix but wanted to see if anyone anticipated this breaking anything else. I briefly tried drawing a few other shapes but saw no difference in the rendered output regardless of what I set for the miter limit. I also did some searching and as far as I can tell miter limit never gets assigned anywhere in p5.

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: 0.6.1
• Web browser and version: Chrome 65, Firefox 60, Safari 11.03
• Operating System: OSX 10.13.3
• Steps to reproduce this: Set large strokeweight: http://alpha.editor.p5js.org/aferriss/sketches/HkQQtUdZQ

[MichaelPaulukonis]

I believe this is functioning as designed? You'll get a similar effect in other drawing applications using text-outlines. I've made use of it, before.

[aferriss]

@MichaelPaulukonis Yes I think it is functioning as designed, I just don't think this is what you might expect from stroked text. If it doesn't break anything else or change the appearance of the way any other functions render, is there a downside to just defaulting miterLimit to 2?

The miterLimit property seems a bit arcane to me. Even if you're well versed in the canvas context's properties, it seems like this one might be easily overlooked. I'm just curious if there is an argument for leaving it at the default vs. changing it so that text stroke renders in a more intuitive way.

[limzykenneth]

I would say if this is a consistent behaviour across implementations in other drawing applications then it should probably be left as is, partly to manage expectation for people who were used to using those applications. Also limiting it to such a low number wouldn't that mean if someone wanted the sharp miters couldn't have them in p5 (star shapes for example)?

How about a new function in p5.js to set miter limit to cater to both case?

[aferriss]

@limzykenneth I think a function to set miter limit sounds like a good compromise. I'll see if I can whip something up.

I finally was able to see a difference when changing the miter limit settings when drawing a star as you suggested.

[YoavSarfaty]

Just wanted to point out that it is also possible to change the miterLimit before drawing text and restore it afterwards.

[lmccart]

this function might be a bit specific for such a general purpose library -- one thing we want to avoid is newcomers looking at the reference page and seeing many functions whose use are confusing for them. maybe it would be better to have an examples on the examples page that demonstrates how to call some native canvas JS within a sketch to address this issue? (presuming that is possible with the way the text and stroke functions work in p5?)