non-default text & knockout text renders incorrectly

[mmalex]

hi! I've noticed that knockout text (reverse video) and fancy fonts (georgia on the mac, in this case) don't render correctly.
it looks like the inside/outside rules are wrong.
https://github.com/plinkysynth/scratch_stuff/blob/main/hellokicanvas.kicad_pcb (I tried to make a direct kicanvas link but its not loading?! it loads locally tho)

I've also created a more minimal file consisting of the board outline and a single letter 'o' in georgia font, if that's helpful for a simpler repro.
https://github.com/plinkysynth/scratch_stuff/blob/main/minimal.kicad_pcb

sorry if this is a dup, I couldn't see one!

[mmalex]

(sorry I forgot to say - repros on chrome, firefox and safari mac, all up to date as of today.)
perhaps the fix will be as simple as setting - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule - to evenodd, rather than nonzero (the default)? but I havent looked at the code. oh it looks like you're tesselating to triangles. that makes the fix trickier. :(

[theacodes]

We don't use SVG for rendering. KiCanvas hasn't yet implemented custom fonts or knockout text, but it's coming..

…

On Tue, Oct 24, 2023, 1:40 PM Alex Evans ***@***.***> wrote: (sorry I forgot to say - repros on chrome, firefox and safari mac, all up to date as of today.) perhaps the fix will be as simple as setting - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule - to evenodd, rather than nonzero (the default)? but I havent looked at the code. — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB5I4Y44BYOV5F7RE7PS73YA74R3AVCNFSM6AAAAAA6OBIK3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZXG4YTSNZRHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mmalex]

understood! I went and looked after I left my comment and saw that you're tesselating the polygons yourself. awesome, but yeah, makes it tricker. I guess you need a good javascript tesselator with support for self intersecting polygons + odd/even rules? ironically old old gl used to have a one liner more or less to do this (GLUtessellator) but I dont think GLU made it into the webgl age :) however, I can vouch for this guy being amazing so its exciting that this exists: https://github.com/memononen/tess2.js/