[Web API] Implement the fontKerning attribute for Canvas2D text

[Rumyra]

Acceptance Criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  or
• Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

Implement the fontKerning attribute for Canvas2D text

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1778908

Other info

So the fontKerning attribute is defined in the mixin CanvasTextDrawingStyles, which is directly inherited by CanvasRenderingContext2D

The mixin CanvasTextDrawingStyles is also inherited by OffscreenCanvasRenderingContext2D.

I think we need to add the attribute to CanvasRenderingContext2D and maybe OffscreenCanvasRenderingContext2D

The options to the attributes are implemented as strings by FF rather than enums as per spec. So this should throw on invalid value, but will actually just ignore the value - and presumably default to auto or whatever its current value is. This should be added as a note to the BCD. Note however that this is consistent for other similar cases in FF.

Chrome ignores non-standard values but accepts the the correct values case insensitively. So there are two issues there. Can be tracked in https://bugs.chromium.org/p/chromium/issues/detail?id=1343333 . Another BCD note.

[hamishwillee]

Status

• BCD
  • FF98 OffscreenCanvasRenderingContext2D support added behind pref browser-compat-data#17513
  • FF104 adds support for CanvasRenderingContext2D.fontKerning browser-compat-data#17524
  • Chrome 98 HTMLCanvasElement support for contextlost /restored events browser-compat-data#17602
  • CanvasRenderingContext2D.reset - add missing MDN links browser-compat-data#17603
  • Probably more for the OffScreenContext
• Docs
  • CanvasRenderingContext2D - add missing properties #19859 - include fontKern
  • Still need same thing for OffscreenCanvasRenderingContext2D.
  • OffscreenCanvas.getContext() layout and compatibility fixes #20077
• Release note - FF104 Relnote: canvas fontkerning #19985
• dev-doc-complete

Done.

[hamishwillee]

So the OffscreenCanvasRenderingContext2D is not documented, which means that there is a lot to work out "what we support". What everyone else supports.

I am testing if docs are pretty much "exactly the same" as for CanvasRenderingContext2D in bugzilla 1746750

The differences are pretty minor - the CanvasRenderingContext2D has one additional interface CanvasUserInterface, has a method getContextAttributes(); and is only exposed on the window. The OffscreenCanvasRenderingContext2D is available on workers and window and has a method commit();.

This is IDL for the OffscreenCanvasRenderingContext2D. The prefix

• (B) indicates there is a browser compat entry for OffscreenCanvasRenderingContext2D
• (X) indicates entry for OffscreenCanvasRenderingContext2D in BCD is missing.
• (C) indicates in docs for CanvasRenderingContext2D have entry for item
• (CX) indicates missing docs for CanvasRenderingContext2D

[Exposed=(Window,Worker)]
interface OffscreenCanvasRenderingContext2D {
(X)  undefined commit();
(B)(C)  readonly attribute OffscreenCanvas canvas;
};

OffscreenCanvasRenderingContext2D includes CanvasState;
  // state
(B)(C)  undefined save(); // push state on state stack
(B)(C)  undefined restore(); // pop state stack and restore state
(X)(CX)  undefined reset(); // reset the rendering context to its default state
(X)(CX)  boolean isContextLost(); // return whether context is lost

OffscreenCanvasRenderingContext2D includes CanvasTransform;
  // transformations (default transform is the identity matrix)
(B)(C)  undefined scale(unrestricted double x, unrestricted double y);
(B)(C)  undefined rotate(unrestricted double angle);
(B)(C)  undefined translate(unrestricted double x, unrestricted double y);
(B)(C)  undefined transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);

(B)(C)  [NewObject] DOMMatrix getTransform();
(B)(C)  undefined setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
(B)(C)  undefined setTransform(optional DOMMatrix2DInit transform = {});
(B)(C)  undefined resetTransform();

OffscreenCanvasRenderingContext2D includes CanvasCompositing;
  // compositing
(B)(C)  attribute unrestricted double globalAlpha; // (default 1.0)
(B)(C)  attribute DOMString globalCompositeOperation; // (default "source-over")

OffscreenCanvasRenderingContext2D includes CanvasImageSmoothing;
  // image smoothing
(B)(C)  attribute boolean imageSmoothingEnabled; // (default true)
(B)(C)  attribute ImageSmoothingQuality imageSmoothingQuality; // (default low)

OffscreenCanvasRenderingContext2D includes CanvasFillStrokeStyles;
  // colors and styles (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
(B)(C)  attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
(B)(C)  attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
(B)(C)  CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
(B)(C)  CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
(X)(C)  CanvasGradient createConicGradient(double startAngle, double x, double y);
(B)(C)  CanvasPattern? createPattern(CanvasImageSource image, [LegacyNullToEmptyString] DOMString repetition);

OffscreenCanvasRenderingContext2D includes CanvasShadowStyles;
  // shadows
(B)(C)  attribute unrestricted double shadowOffsetX; // (default 0)
(B)(C)  attribute unrestricted double shadowOffsetY; // (default 0)
(B)(C)  attribute unrestricted double shadowBlur; // (default 0)
(B)(C)  attribute DOMString shadowColor; // (default transparent black)
  
OffscreenCanvasRenderingContext2D includes CanvasFilters;
  // filters
(B)(C)  attribute (DOMString or CanvasFilter) filter; // (default "none")

OffscreenCanvasRenderingContext2D includes CanvasRect;
  // rects
(B)(C)  undefined clearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
(B)(C)  undefined fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
(B)(C)  undefined strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  
OffscreenCanvasRenderingContext2D includes CanvasDrawPath;
  // path API (see also CanvasPath)
(B)(C)  undefined beginPath();
(B)(C)  undefined fill(optional CanvasFillRule fillRule = "nonzero");
(B)(C)  undefined fill(Path2D path, optional CanvasFillRule fillRule = "nonzero");
(B)(C)  undefined stroke();
(B)(C)  undefined stroke(Path2D path);
(B)(C)  undefined clip(optional CanvasFillRule fillRule = "nonzero");
(B)(C)  undefined clip(Path2D path, optional CanvasFillRule fillRule = "nonzero");
(B)(C)  boolean isPointInPath(unrestricted double x, unrestricted double y, optional CanvasFillRule fillRule = "nonzero");
(B)(C)  boolean isPointInPath(Path2D path, unrestricted double x, unrestricted double y, optional CanvasFillRule fillRule = "nonzero");
(B)(C)  boolean isPointInStroke(unrestricted double x, unrestricted double y);
(B)(C)  boolean isPointInStroke(Path2D path, unrestricted double x, unrestricted double y);
  
OffscreenCanvasRenderingContext2D includes CanvasText;
  // text (see also the CanvasPathDrawingStyles and CanvasTextDrawingStyles interfaces)
(B)(C)  undefined fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
(B)(C)  undefined strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
(B)(C)  TextMetrics measureText(DOMString text);
  
OffscreenCanvasRenderingContext2D includes CanvasDrawImage;
  // drawing images
(B)(C)  undefined drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy);
(B)(C)  undefined drawImage(CanvasImageSource image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
(B)(C)  undefined drawImage(CanvasImageSource image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);

OffscreenCanvasRenderingContext2D includes CanvasImageData;
  // pixel manipulation
(B)(C)  ImageData createImageData([EnforceRange] long sw, [EnforceRange] long sh, optional ImageDataSettings settings = {});
(B)(C)  ImageData createImageData(ImageData imagedata);
(B)(C)  ImageData getImageData([EnforceRange] long sx, [EnforceRange] long sy, [EnforceRange] long sw, [EnforceRange] long sh, optional ImageDataSettings settings = {});
(B)(C)  undefined putImageData(ImageData imagedata, [EnforceRange] long dx, [EnforceRange] long dy);
(B)(C)  undefined putImageData(ImageData imagedata, [EnforceRange] long dx, [EnforceRange] long dy, [EnforceRange] long dirtyX, [EnforceRange] long dirtyY, [EnforceRange] long dirtyWidth, [EnforceRange] long dirtyHeight);
  
OffscreenCanvasRenderingContext2D includes CanvasPathDrawingStyles;
  // line caps/joins
(B)(C)  attribute unrestricted double lineWidth; // (default 1)
(B)(C)  attribute CanvasLineCap lineCap; // (default "butt")
(B)(C)  attribute CanvasLineJoin lineJoin; // (default "miter")
(B)(C)  attribute unrestricted double miterLimit; // (default 10)

  // dashed lines
(B)(C)  undefined setLineDash(sequence<unrestricted double> segments); // default empty
(B)(C)  sequence<unrestricted double> getLineDash();
(B)(C)  attribute unrestricted double lineDashOffset;
  
OffscreenCanvasRenderingContext2D includes CanvasTextDrawingStyles;
  // text
(B)(C)  attribute DOMString font; // (default 10px sans-serif)
(B)(C)  attribute CanvasTextAlign textAlign; // (default: "start")
(B)(C)  attribute CanvasTextBaseline textBaseline; // (default: "alphabetic")
(B)(C)  attribute CanvasDirection direction; // (default: "inherit")
(X)(CX)  attribute DOMString letterSpacing; // (default: "0px")
(X) (CX) attribute CanvasFontKerning fontKerning; // (default: "auto")
(X)(CX)  attribute CanvasFontStretch fontStretch; // (default: "normal")
(X)(CX)  attribute CanvasFontVariantCaps fontVariantCaps; // (default: "normal")
(X)(CX)  attribute CanvasTextRendering textRendering; // (default: "auto")
(X) (CX) attribute DOMString wordSpacing; // (default: "0px")
  
OffscreenCanvasRenderingContext2D includes CanvasPath;
  // shared path API methods
(B)(C)  undefined closePath();
(B)(C)  undefined moveTo(unrestricted double x, unrestricted double y);
(B)(C)  undefined lineTo(unrestricted double x, unrestricted double y);
(B)(C)  undefined quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
(B)(C)  undefined bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
(B)(C)  undefined arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); 
(B)(C)  undefined rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
(X)  undefined roundRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h, optional (unrestricted double or DOMPointInit or sequence<(unrestricted double or DOMPointInit)>) radii = 0);
(B)(C)  undefined arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean counterclockwise = false); 
(B)(C)  undefined ellipse(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, optional boolean counterclockwise = false); 

Below is the CanvasUserInterface which is not in the offscreen case. Included for completeness.

CanvasRenderingContext2D includes CanvasUserInterface;
(X)(C)  undefined drawFocusIfNeeded(Element element);
(X)(C)  undefined drawFocusIfNeeded(Path2D path, Element element);
(X)(C)  undefined scrollPathIntoView();
(X)(C)  undefined scrollPathIntoView(Path2D path);

[Rumyra]

Very nice @hamishwillee