implement styling of fill/stroke/strokeWidth when using Font.draw() or Glyph.draw()

[Connum]

Description

Implements a new method Path.applyStyles(), which applies valid style properties (fill, stroke, strokeWidth) to the Path. This is used in Glyph.getPath() and Font.getPath() and allows to specify styling options e.g. when using Font.draw() or Glyph.draw().

Motivation and Context

Implements #623.

How Has This Been Tested?

Temporarily modifying docs/index.html

Screenshots (if appropriate):

options in renderText() of docs/index.html

result:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I did npm run test and all tests passed green (including code styling checks).
• I have added tests to cover my changes.
• My change requires a change to the documentation.
• I have updated the README accordingly.
• I have read the CONTRIBUTING document.

[ILOVEPIE]

I'll review this later today.

[ILOVEPIE]

One discrepancy here with regard to other font renderers is the fact that lineWidth draws half the line inside the fill area, which means our stroke is actually half-width this way (at least with canvas, not sure about SVG). Also, Miter type becomes important when rendering the stroke on text, so we need to do some additional research with regards to that before this can go through. In my code base I'm using lineCap = "round" and lineJoin = "round" but this may only be correct for my use case.

[ILOVEPIE]

I'll review this later today.

I ended up having a little time to go through it now before work.

[Connum]

I would treat the outline positioning as a separate follow-up issue. It comes into play during the actual canvas drawing and we'll have to take it into account there, but at least the values get passed along with the Path now.

But good point with the line behaviour. We should take a look at that and find good values for it, and probably add an option to influence it according to one's needs.

[ILOVEPIE]

In my codebase I'm doing a kind of dirty hack by multiplying the outline width by 2 then filling the text with destination-out compositing mode to cut out the inner part of the stroke.

[Connum]

In my codebase I'm doing a kind of dirty hack by multiplying the outline width by 2 then filling the text with destination-out compositing mode to cut out the inner part of the stroke.

That's what I thought of doing. Doesn't even feel too dirty to me.

[ILOVEPIE]

In my codebase I'm doing a kind of dirty hack by multiplying the outline width by 2 then filling the text with destination-out compositing mode to cut out the inner part of the stroke.

That's what I thought of doing. Doesn't even feel too dirty to me.

The problem with that is that it doesn't work for SVG output, unless we want to use masking.