CanvasRenderingContext2D - add missing properties

[hamishwillee]

Missing from CanvasRenderingContext2D API docs

• letterSpacing
• fontKerning
• fontStretch
• fontVariantCaps
• textRendering
• wordSpacing
• roundRect()
• isContextLost()
  • HTMLCanvasElement: contextlost event
  • HTMLCanvasElement: contextrestored event
• reset()

Docs work being done as part of #18772

Adds new docs with live examples. Everything experimental except for fontkerning property.

[github-actions]

Preview URLs

• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/fontKerning
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/fontStretch
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/reset
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/textRendering
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/CanvasRenderingContext2D
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLCanvasElement/contextlost_event
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event
• https://pr19859.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLCanvasElement

Flaws

Note! 11 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTMLCanvasElement
Title: HTMLCanvasElement
on GitHub
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/HTMLCanvasElement/mozPrintCallback does not exist

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing
Title: CanvasRenderingContext2D.wordSpacing
on GitHub
Flaw count: 1

• broken_links:
  • Can't resolve https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

External URLs

URL: /en-US/docs/Web/API/HTMLCanvasElement
Title: HTMLCanvasElement
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/HTMLCanvasElement/contextlost_event
Title: HTMLCanvasElement: contextlost event
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/HTMLCanvasElement/contextrestored_event
Title: HTMLCanvasElement: contextrestored event
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D
Title: CanvasRenderingContext2D
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps
Title: CanvasRenderingContext2D.fontVariantCaps
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/fontKerning
Title: CanvasRenderingContext2D.fontKerning
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing
Title: CanvasRenderingContext2D.wordSpacing
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/textRendering
Title: CanvasRenderingContext2D.textRendering
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/isContextLost
Title: CanvasRenderingContext2D.isContextLost()
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing
Title: CanvasRenderingContext2D.letterSpacing
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/fontStretch
Title: CanvasRenderingContext2D.fontStretch
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/reset
Title: CanvasRenderingContext2D.reset()
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
Title: CanvasRenderingContext2D.roundRect()
on GitHub

No new external URLs

(this comment was updated 2022-09-01 14:26:23.001359)

[Elchi3]

How great roundRect is!! 🤯 Finally!

Great content work here, love it! I had some minor things and one example that doesn't work for me.

Also, I looked up if this is everything new in Canvas 2D and it seems that there is also a new reset() method. Would be cool to document it as well. Doesn't need to be in this PR, though.

[Elchi3]

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";
}

[hamishwillee]

Thanks @Elchi3
Yes, clearly the default font is not a variable font, so this can't work. So yes we need to add a font. Unfortunately I am completely stumped as to how to do this in a live example (and I think it is worth doing in a live example).

I tried having the font in the same folder as the docs but I get 404 errors (it isn't served). I tried using links from the interactive examples, but they fail with CORS errors.

The "best" way to do this would be to use a CDN served font with appropriate allow headers. I tried this with fonts.gstatic.com but I can't find a woff file that contains variable fonts. For example, this doesn't vary:

let font_file = new FontFace('LeagueMonoVariable', 'url(https://fonts.gstatic.com/s/leaguespartan/v6/kJEqBuEW6A0lliaV_m88ja5TwvZwLZk.woff2');
font_file.load().then( () => {

  document.fonts.add(font_file);
  // font loaded successfully!
  const ctx = canvas.getContext('2d');
  ctx.font = '36px "LeagueMonoVariable"'

// Default (normal)
ctx.fillText(`Hello world (default: ${ctx.fontStretch})`, 5, 20);
...

What I'd like to do, because I think it would be generally useful, is use the google font API with the font loading API. However passing in the URLs suggested for CSS just gives you link parsing errors.

Any ideas?

PS Our CSS Font loading API docs are "very thin". Not enough examples, and some may be incorrect - for example https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load looks to me to not be adding the font to the document, and I think that is a precondition.
In general it isn't clear what you need to do - I THINK you load() the font, wait for it to complete, then add it to the document and wait for it to be ready, but none of that is demonstrated.

[hamishwillee]

@Elchi3 So I think we're good except for fontstretch, on which I am stumped for the above reasons.

[Elchi3]

@bsmth See these messages above^

[bsmth]

Thanks, tracking this improvement in #20208

[wbamberg]

Re: using fancy fonts in live samples, please see mdn/yari#5727.

[Elchi3]

Fantastic work! Found two more nits but all reviewed and ready to go except fontStretch.

[bsmth]

Thanks @hamishwillee and @Elchi3 , looks great! 🙌🏻

Is there anything else outstanding on this one? It looks ready to merge from my side.

[Elchi3]

I think this is good. It's just that we need to work a bit on fontStretch as it only really works with variable fonts. I would be okay with putting that work to a separate PR, though.

[bsmth]

I would be okay with putting that work to a separate PR, though.

Great, Hamish probably has the context on it, but I'm happy to pick that up as a follow-up.

[bsmth]

Thank you! 👍🏻

[teoli2003]

The functions DrawRect() and DrawCirclestart with capital letters, they shouldn't. @bsmth, can you create a follow-up PR?

[bsmth]

The functions DrawRect() and DrawCirclestart with capital letters, they shouldn't. @bsmth, can you create a follow-up PR?

Well spotted @teoli2003, I've added cleanup PR here: #20210

[hamishwillee]

Thanks guys! Yes, I'm still trying to get the variable fonts thing working as a live example (yes, I could do it as an interactive one, but I prefer live). The easy fix would be mdn/yari#5727 but I am also trying to get Google Fonts to work here.