CanvasRenderingContext2D needs improved fontStretch property example

[bsmth]

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontStretch

This example doesn't show different text renderings to me (in Chrome).
Like in CSS, should a new FontFace be added to the document first?

let ff = new FontFace('myfont', url);
ff.stretch = "condensed";
document.fonts.add(ff);

document.fonts.ready.then(() => {
    ctx.font = '25px myfont';
    ctx.fontStretch = "condensed";
}

Originally posted by @Elchi3 in #19859 (comment)

[hamishwillee]

I was still investigating this when the previous issue merged.

The problem is that you can only stretch a variable font that supports stretching. So yes, we do need to add a font that does this.

The ideal would be to load it from the same folder but that isn't supported yet - see mdn/yari#5727 (ideal because then we could steal the font used in the CSS version of this interactive example). Can't load it from github as that results in a cross-side fetch error.

What I have been trying in the meantime is loading from google fonts. However defining a URL that actually provides the required stretchable font hasn't worked. Still trying.

[bsmth]

OK, I'll leave this one in your court while you try to get it working. Let me know if you'd like to hand it over, happy to pick it up.