Character rendering issues occur when stroking text. #707
Comments
|
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: 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 |
|
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();
}
} |
|
I'm going to have to adapt it for variable fonts, but that comes after resolving this bug. |
Do you have examples for this? While implementing variable fonts, I added a performance optimisation so that |
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. |
|
Yeah, There's some issues with the drawing code. I'll rework it some. |
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
The text was updated successfully, but these errors were encountered: