CanvasRenderingContext2D.fontStretch - make live example work #20794
Conversation
Preview URLsExternal URLsURL:
(this comment was updated 2022-09-20 07:06:42.239339) |
| }); | ||
| We then assign the font face we downloaded to the context, and use the context to draw text to the canvas at each of the keyword stretch levels. | ||
| Note that again the size of the desired font is specified. | ||
| This does not have to match the loaded font size; but may not render as well if there is a mismatch. |
There was a problem hiding this comment.
I know that you can load a font in one size and draw in another.
My understanding is that this is because the font engine can scale the size font it has downloaded. So you will get best result if they loaded and drawn fonts are the same, but it will still work. However I am not 100% certain on this, so if you know differently ....
There was a problem hiding this comment.
I tested with
document.fonts.load("12px Inconsolata").then(
() => {
ctx.font = "150px 'Inconsolata'";
// ...versus
document.fonts.load("150px Inconsolata").then(
() => {
ctx.font = "12px 'Inconsolata'";
// ...It doesn't have any visible side-effects of upscaling / downscaling, at least.
There was a problem hiding this comment.
OK, I am deleting this and adding the comment above: https://github.com/mdn/content/pull/20794/files#r974955540
Essentially saying it doesn't have to be the same font size, but not explaining why.
That allows us to merge this as "not wrong" and address reasons later.
| This does not have to match the loaded font size; but may not render as well if there is a mismatch. |
@Elchi3 Do you know someone who could explain this/confirm?
It might well be that it works for this particular type of font, but it might not work in another case. That's why I used the weasel words "but may not render as well if there is a mismatch."
There was a problem hiding this comment.
Trying my luck and pinging @fserb here. Fernando, do loaded font size and ctx specified font sizes have to match? What if they don't?
document.fonts.load("30px Inconsolata").then(
() => {
ctx.font = "30px 'Inconsolata'";
There was a problem hiding this comment.
@fserb ^^^ Any advice you can give would be much appreciated. I'll merge this next week if we don't get a response.
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
| }); | ||
| We then assign the font face we downloaded to the context, and use the context to draw text to the canvas at each of the keyword stretch levels. | ||
| Note that again the size of the desired font is specified. | ||
| This does not have to match the loaded font size; but may not render as well if there is a mismatch. |
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
| document.fonts.load("30px Inconsolata").then( | ||
| () => { | ||
| ctx.font = "30px 'Inconsolata'"; | ||
| // Default (normal) |
There was a problem hiding this comment.
@Elchi3 Leaving this comment - it is not obvious otherwise this is "normal"
files/en-us/web/api/canvasrenderingcontext2d/fontstretch/index.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Florian Scholz <fs@florianscholz.com>
) * CanvasRenderingContext2D.fontStretch - fix live example * Split up example with more cross links showing what is going on * Apply suggestions from code review Co-authored-by: Florian Scholz <fs@florianscholz.com> Co-authored-by: Estelle Weyl <estelle@weyl.org> Co-authored-by: Florian Scholz <fs@florianscholz.com>
Fixes #20208
@Elchi3 and @bsmth - got font stretch working for rendering text.
The trick was knowing that I was working with a font that contained variable font information "for sure". Once I had that, I was able to realize the FontFace name for the font was wrong.
I have split up the example so that there is more explanation of the relevant code.