Fix spikes from wide strokes (#6924)

[joshuahhh]

Description of change

This fixes #6924, the spikes-behind-wide-joins problem.

Before: (miter, bevel, round)

After: (miter, bevel, round)

It's not perfect. In particular, some regions are drawn twice, so strokes with alpha will be a bit mis-drawn. But that was the case before anyway. I believe some documentation already recommends using filters rather than stroke alpha in such cases.

(Note that some edges of the triangulation are incorrectly drawn red in the "round" examples above. This is an unrelated bug, which you can see occurs in both the "before" and "after" cases. If I can isolate it, I will report it as a separate issue.)

Pre-Merge Checklist

• Lint process passed (npm run lint)
• Tests passed (npm run test)

Thanks so much!

[JetLua]

Cool ! This PR also fixed #6903 .

https://pixiplayground.com/#/edit/fxZUnCBQVQhwTi2ePohLv

[bigtimebuddy]

Thank you for this PR! Great explanation. Will review it. ping @SukantPal

[ShukantPal]

Thanks for bringing these changes! In the future, I think we'll need to do work reducing the technical debt in this file.

[joshuahhh]

Thanks for the quick responses!

@bigtimebuddy, I recommend reviewing the change with whitespace ignored – it makes much more sense that way: https://github.com/pixijs/pixi.js/pull/6928/files?diff=unified&w=1.

@SukantPal, I agree that buildNonNativeLine & friends could use a major rework. (For instance, I honestly have no idea why indexCount needs to be tracked the way it is.)

[codecov-io]

Codecov Report

Merging #6928 into dev will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##               dev     #6928   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           15        15           
  Lines          671       671           
=========================================
  Hits           671       671           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f77e09d...af6e3aa. Read the comment docs.

[bigtimebuddy]

Another good one @joshuahhh, you're on a roll! Thanks.