Character rendering issues occur when stroking text. #707

ILOVEPIE · 2024-04-30T05:24:47Z

Character rendering issues occur when stroking text.

Expected Behavior

The stroke should match the fill.

Current Behavior

Random dots of stroke appear sometimes, also some lines cut inwards into the fill.

Possible Solution

Unknown

Steps to Reproduce (for bugs)

I'll provide a link to the other maintainers so we can narrow down a test-case.

Context

I need to provide psychovisually lossless rendering of Advanced SubStation Alpha, this bug is causing issues for me.

Your Environment

Version used: 2.0.0-git
Font used: DFKai-SB, Monotype Corsiva,Franklin Gothic Book
Browser Name and version: All
Operating System and version (desktop or mobile): All
Link to your project: https://github.com/SABRE-JS/SABRE.js

axkibe · 2024-05-09T05:48:29Z

Work for me.

index.html:

<html>
	<script src="opentype.js" defer></script>
	<script src="script.js" defer></script>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

script.js:

window.onload =
	async function( )
{
	const buffer = await ( await fetch('franklin.ttf') ).arrayBuffer( );
	const font = opentype.parse( buffer );

	const canvas = document.getElementById( 'canvas' );
	canvas.width = 1000;
	canvas.height = 400;
	const cx = canvas.getContext( '2d' );

	const path = font.getPath( 'Japan! Tokyo', 10, 80, 100, { } );
	path.stroke = 'blue';
	path.strokeWidth = 3;
	path.fill = 'lightgray';
	cx.lineJoin = 'round';
	cx.lineCap = 'round';
	path.draw( cx );
}

franklin.ttf: from here:
https://fontsgeek.com/fonts/Franklin-Gothic-Book-Regular

result:

PS: What I do noticed, is that some glyph would benefit from calling closePath() what I believe is not done.

Otherwise can you modify my minimal example so it makes the error you are seeing?

PPS: for completness, just put the files in a directory for example called web and
npm install http-server
./node_modules/.bin/http-server -c-1 web/
to run it.

ILOVEPIE · 2024-05-09T19:44:20Z

This issue was mostly created so that I could keep track of my progress looking into the issue, but if you're willing to help me track this down, thanks. The way I'm doing this is iterating through the glyphs and drawing them individually instead of the whole thing all at once (because I have to composite them with webgl). The version of the font I'm using is identical to the one you found. Here's a simplified version of the drawGlyph function I'm using:

function drawGlyph (glyph, offsetX, offsetY, stroke) {
    const fontSize = this._fontInfo.size;
    const fontUnitsScale = this._fontInfo.font.unitsPerEm || 1000;
    const fontSizeMultiplier = fontSize / fontUnitsScale;
    const yoffset =
        this._fontInfo.font.ascender * fontSizeMultiplier;
    const path = glyph.getPath(
        offsetX,
        offsetY + yoffset,
        fontSize
    );
    path.fill = null;
    path.stroke = null;
    path.draw(this._ctx);
    if (stroke) {
        this._ctx.stroke();
    } else {
        this._ctx.fill();
    }
}

ILOVEPIE · 2024-05-10T01:44:18Z

I'm going to have to adapt it for variable fonts, but that comes after resolving this bug.
adding closePath doesn't seem to fix it

Connum · 2024-05-14T20:16:46Z

What I do noticed, is that some glyph would benefit from calling closePath() what I believe is not done.

Do you have examples for this? While implementing variable fonts, I added a performance optimisation so that closePath() is only called when a glyph has a stroke applied, because the command is automatically executed for filled fonts, which resulted in unnecessary overhead because it was then called twice.

axkibe · 2024-05-15T13:10:40Z

What I do noticed, is that some glyph would benefit from calling closePath() what I believe is not done.

Do you have examples for this? While implementing variable fonts, I added a performance optimisation so that closePath() is only called when a glyph has a stroke applied, because the command is automatically executed for filled fonts, which resulted in unnecessary overhead because it was then called twice.

Well I guess there you have the issue, ILOVEPIE introduced it by setting stroke to null, then stroking himself. So paths are not closed.

BTW: I really dislike the API design in the first place. The API should simply be path.sketch() or follow() or whatever verb matches, and the caller should then call stroke and or fill. As you seen in my example the lineJoin/lineCap things are missing for example anyway.

When I was testing this with lineCaps as butts the ! for example wasn't closed.

ILOVEPIE · 2024-05-18T19:53:31Z

Yeah, There's some issues with the drawing code. I'll rework it some.

axkibe · 2024-05-28T08:28:24Z

BTW: If all you need it filling and stroking of text.. do you need opentype at all? canvas.fillText and canvas.strokeText should be fine for this. (I needed opentype.js for rendering, because I needed endless zooming where these functions had a size limit and they are missing getAdvanceWith() for caret based editors, but otherwise for this example I see it as unnessary complication to use this library at all..)

ILOVEPIE · 2024-06-02T21:58:16Z

BTW: If all you need it filling and stroking of text.. do you need opentype at all? canvas.fillText and canvas.strokeText should be fine for this. (I needed opentype.js for rendering, because I needed endless zooming where these functions had a size limit and they are missing getAdvanceWith() for caret based editors, but otherwise for this example I see it as unnessary complication to use this library at all..)

I have to use OpenType.js because I have to have access to the information required to render it like Windows does because I have to emulate Windows font rendering for my project.

axkibe · 2024-06-05T15:37:08Z

OK, how is it different than canvas with converted to .woff does?

talltyler · 2024-06-22T22:30:48Z

From my understanding this line https://github.com/opentypejs/opentype.js/blob/master/src/glyph.mjs#L235
should be something like this } else if (cmd.type === 'Z' && ((p.stroke && p.strokeWidth) || options.closePaths)) {
to enable drawing with completed paths outside of the internal drawing code, this maybe could also be done if options.drawSVG is true. What do you all think? Should I make a PR?

utunnels · 2024-08-13T21:13:35Z

From my understanding this line https://github.com/opentypejs/opentype.js/blob/master/src/glyph.mjs#L235 should be something like this } else if (cmd.type === 'Z' && ((p.stroke && p.strokeWidth) || options.closePaths)) { to enable drawing with completed paths outside of the internal drawing code, this maybe could also be done if options.drawSVG is true. What do you all think? Should I make a PR?

I think path should also be closed when M command is used. Or at least when a glyph ends. Because I notice Some font just don't use Z command. But maybe that's a mistake of the font. What do you think?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Character rendering issues occur when stroking text. #707

Character rendering issues occur when stroking text. #707

ILOVEPIE commented Apr 30, 2024

axkibe commented May 9, 2024 •

edited

Loading

ILOVEPIE commented May 9, 2024 •

edited

Loading

ILOVEPIE commented May 10, 2024 •

edited

Loading

Connum commented May 14, 2024

axkibe commented May 15, 2024

ILOVEPIE commented May 18, 2024

axkibe commented May 28, 2024

ILOVEPIE commented Jun 2, 2024

axkibe commented Jun 5, 2024

talltyler commented Jun 22, 2024

utunnels commented Aug 13, 2024

Character rendering issues occur when stroking text. #707

Character rendering issues occur when stroking text. #707

Comments

ILOVEPIE commented Apr 30, 2024

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

axkibe commented May 9, 2024 • edited Loading

ILOVEPIE commented May 9, 2024 • edited Loading

ILOVEPIE commented May 10, 2024 • edited Loading

Connum commented May 14, 2024

axkibe commented May 15, 2024

ILOVEPIE commented May 18, 2024

axkibe commented May 28, 2024

ILOVEPIE commented Jun 2, 2024

axkibe commented Jun 5, 2024

talltyler commented Jun 22, 2024

utunnels commented Aug 13, 2024

axkibe commented May 9, 2024 •

edited

Loading

ILOVEPIE commented May 9, 2024 •

edited

Loading

ILOVEPIE commented May 10, 2024 •

edited

Loading