skia-canvas 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 <!-- ## 🥚 ⟩ [Unreleased] -->
 
+
+## 🥚 ⟩ [v2.0.2] ⟩ Jan 28, 2025
+### New Features
+- Added `fontHinting` attribute (off by default to better match font weights in browser rendering). Setting it to `true` may result in crisper edges but adds some weight to the font.
+
+### Bugfixes
+- Text spacing
+  - Setting `letterSpacing` no longer indents text at beginning of line
+  - `letterSpacing` now properly handles negative values
+- Improved accuracy of [`measureText()`][measureText()]
+  - Now uses font metrics' default leading when the line-height is left unspecified in the `ctx.font` string (NB: this is likely to cause vertical shifts for non-`alphabetic` baselines)
+  - Updated baseline offset calculations for `middle` & `hanging` to better match browsers
+  - The `actualBoundingBox*` & `lines[].x/y/width/height` rectangles returned by measureText() are now just the glyph-occupied area, not the whole line-height of the textblock
+  - Fixed the sign on `actualBoundingBoxLeft` (positive values now mean *left* of the origin)
+  - `lines[].baseline` now corresponds to the selected `ctx.textBaseline`, previously it was always the alphabetic baseline
+- TypeScript definitions no longer include the entire DOM library (which had been pulling in tons of non-Canvas-related object types that this library doesn't emulate)
+
+## 📦 ⟩ [v2.0.1] ⟩ Dec 8, 2024
+
+### Misc. Improvements
+- Added support for Intel integrated GPUs that would previously throw an "instantiated but unable to render" error
+  - Note: you may need to upgrade to the latest Mesa drivers ([24.3.1 or later][mesa_ppa]), especially for in-window rendering to work correctly on Linux
+- Fixed window initialization for Vulkan GPUs that default to a framebuffer color-format Skia doesn't support
+- Vulkan drivers that fall back to the [Mesa LLVMpipe][mesa_llvmpipe] software renderer now work correctly
+- Optimized font library initialization to improve SVG parsing speed
+
+[mesa_ppa]: https://launchpad.net/~kisak/+archive/ubuntu/kisak-mesa
+[mesa_llvmpipe]: https://docs.mesa3d.org/drivers/llvmpipe.html
+
 ## 📦 ⟩ [v2.0.0] ⟩ Dec 2, 2024
 
 ### New Features
@@ -384,7 +413,9 @@
 
 **Initial public release** 🎉
 
-[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v2.0.0...HEAD
+[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v2.0.2...HEAD
+[v2.0.2]: https://github.com/samizdatco/skia-canvas/compare/v2.0.1...v2.0.2
+[v2.0.1]: https://github.com/samizdatco/skia-canvas/compare/v2.0.0...v2.0.1
 [v2.0.0]: https://github.com/samizdatco/skia-canvas/compare/v1.0.2...v2.0.0
 [v1.0.2]: https://github.com/samizdatco/skia-canvas/compare/v1.0.1...v1.0.2
 [v1.0.1]: https://github.com/samizdatco/skia-canvas/compare/v1.0.0...v1.0.1

package/README.md

@@ -211,7 +211,7 @@ This project is deeply indebted to the work of the [Rust Skia project](https://g
 - [@meihuanyu](https://github.com/meihuanyu) contributed filter & path rendering fixes
 
 ## Copyright
-© 2020–2024 [Samizdat Drafting Co.](https://samizdat.co)
+© 2020–2025 [Samizdat Drafting Co.](https://samizdat.co)
 
 [bool-ops]: https://skia-canvas.org/api/path2d#complement-difference-intersect-union-and-xor
 [c2d_font]: https://skia-canvas.org/api/context#font

package/lib/classes/context.js

@@ -236,6 +236,8 @@ class CanvasRenderingContext2D extends RustClass{
   }
 
   // -- non-standard typography extensions --------------------------------------------
+  get fontHinting(){    return this.prop("fontHinting") }
+  set fontHinting(flag){       this.prop("fontHinting", !!flag) }
   get fontVariant(){    return this.prop('fontVariant') }
   set fontVariant(str){        this.prop('fontVariant', css.variant(str)) }
   get textWrap(){       return this.prop("textWrap") }

package/lib/classes/css.js

@@ -16,7 +16,7 @@ const styleRE = /^(normal|italic|oblique)$/,
       smallcapsRE = /^(normal|small-caps)$/,
       stretchRE = /^(normal|(semi-|extra-|ultra-)?(condensed|expanded))$/,
       namedSizeRE = /(?:xx?-)?small|smaller|medium|larger|(?:xx?-)?large|normal/,
-      numSizeRE = /^([\d\.]+)(px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q)/,
+      numSizeRE = /^(\-?[\d\.]+)(px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q)/,
       namedWeightRE = /^(normal|bold(er)?|lighter)$/,
       numWeightRE = /^(1000|\d{1,3})$/,
       parameterizedRE = /([\w\-]+)\((.*?)\)/,
@@ -56,7 +56,7 @@ function parseFont(str){
             // so start processing what's been collected
             let [emSize, leading] = splitBy(token, '/'),
                 size = parseSize(emSize),
-                lineHeight = parseSize((leading || '1.2').replace(/(\d)$/, '$1em'), size),
+                lineHeight = leading ? parseSize(leading.replace(/(\d)$/, '$1em'), size) : undefined,
                 weight = parseWeight(font.weight),
                 family = splitBy(tokens.join(' '), /\s*,\s*/).map(unquote),
                 features = font.variant=='small-caps' ? {on:['smcp', 'onum']} : {},
@@ -64,7 +64,7 @@ function parseFont(str){
 
             // make sure all the numeric fields have legitimate values
             let invalid = !isFinite(size) ? `font size "${emSize}"`
-                        : !isFinite(lineHeight) ? `line height "${leading}"`
+                        : !isFinite(lineHeight) && lineHeight!==undefined ? `line height "${leading}"`
                         : !isFinite(weight) ? `font weight "${font.weight}"`
                         : family.length==0 ? `font family "${tokens.join(', ')}"`
                         : false;
@@ -78,7 +78,7 @@ function parseFont(str){
                   (variant !== style) && variant,
                   ([variant, style].indexOf(weight) == -1) && weight,
                   ([variant, style, weight].indexOf(stretch) == -1) && stretch,
-                  `${size}px/${lineHeight}px`,
+                  `${size}px${isFinite(lineHeight) ? `/${lineHeight}px`: ''}`,
                   family.map(nm => nm.match(/\s/) ? `"${nm}"` : nm).join(", ")
                 ].filter(Boolean).join(' ')
               })

package/lib/classes/typography.js

@@ -41,19 +41,18 @@ class FontLibrary extends RustClass {
 
 class TextMetrics{
   constructor([
-    width, left, right, ascent, descent,
-    fontAscent, fontDescent, emAscent, emDescent,
+    left, right, ascent, descent, fontAscent, fontDescent,
     hanging, alphabetic, ideographic
   ], lines){
-    readOnly(this, "width", width)
+    readOnly(this, "width", Math.max(0, right) + Math.max(0, left))
     readOnly(this, "actualBoundingBoxLeft", left)
     readOnly(this, "actualBoundingBoxRight", right)
     readOnly(this, "actualBoundingBoxAscent", ascent)
     readOnly(this, "actualBoundingBoxDescent", descent)
     readOnly(this, "fontBoundingBoxAscent", fontAscent)
     readOnly(this, "fontBoundingBoxDescent", fontDescent)
-    readOnly(this, "emHeightAscent", emAscent)
-    readOnly(this, "emHeightDescent", emDescent)
+    readOnly(this, "emHeightAscent", fontAscent)
+    readOnly(this, "emHeightDescent", fontDescent)
     readOnly(this, "hangingBaseline", hanging)
     readOnly(this, "alphabeticBaseline", alphabetic)
     readOnly(this, "ideographicBaseline", ideographic)

package/lib/index.d.ts

@@ -1,10 +1,110 @@
-/// <reference lib="dom"/>
-/// <reference types="node" />
+//
+// Geometry
+//
+
+interface DOMPointInit {
+  x?: number;
+  y?: number;
+  z?: number;
+  w?: number;
+}
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint) */
+interface DOMPoint extends DOMPointReadOnly {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint/x) */
+  x: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint/y) */
+  y: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint/z) */
+  z: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint/w) */
+  w: number;
+}
+
+declare var DOMPoint: {
+  prototype: DOMPoint;
+  new(x?: number, y?: number, z?: number, w?: number): DOMPoint;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPoint/fromPoint_static) */
+  fromPoint(other?: DOMPointInit): DOMPoint;
+};
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly) */
+interface DOMPointReadOnly {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/x) */
+  readonly x: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/y) */
+  readonly y: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/z) */
+  readonly z: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/w) */
+  readonly w: number;
+  matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/toJSON) */
+  toJSON(): any;
+}
+
+declare var DOMPointReadOnly: {
+  prototype: DOMPointReadOnly;
+  new(x?: number, y?: number, z?: number, w?: number): DOMPointReadOnly;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMPointReadOnly/fromPoint_static) */
+  fromPoint(other?: DOMPointInit): DOMPointReadOnly;
+};
+
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect) */
+interface DOMRect extends DOMRectReadOnly {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+declare var DOMRect: {
+  prototype: DOMRect;
+  new(x?: number, y?: number, width?: number, height?: number): DOMRect;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/fromRect_static) */
+  fromRect(other?: DOMRectInit): DOMRect;
+};
+
+interface DOMRectList {
+  readonly length: number;
+  item(index: number): DOMRect | null;
+  [index: number]: DOMRect;
+}
+
+declare var DOMRectList: {
+  prototype: DOMRectList;
+  new(): DOMRectList;
+};
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) */
+interface DOMRectReadOnly {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/bottom) */
+  readonly bottom: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/height) */
+  readonly height: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/left) */
+  readonly left: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/right) */
+  readonly right: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/top) */
+  readonly top: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/width) */
+  readonly width: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/x) */
+  readonly x: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/y) */
+  readonly y: number;
+  toJSON(): any;
+}
+
+declare var DOMRectReadOnly: {
+  prototype: DOMRectReadOnly;
+  new(x?: number, y?: number, width?: number, height?: number): DOMRectReadOnly;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/fromRect_static) */
+  fromRect(other?: DOMRectInit): DOMRectReadOnly;
+};
 
-export class DOMPoint extends globalThis.DOMPoint {}
-export class DOMRect extends globalThis.DOMRect {}
-export class CanvasGradient extends globalThis.CanvasGradient {}
-export class CanvasTexture {}
 
 //
 // Images
@@ -57,6 +157,35 @@ export class Image extends EventEmitter {
 // DOMMatrix
 //
 
+interface DOMMatrix2DInit {
+  a?: number;
+  b?: number;
+  c?: number;
+  d?: number;
+  e?: number;
+  f?: number;
+  m11?: number;
+  m12?: number;
+  m21?: number;
+  m22?: number;
+  m41?: number;
+  m42?: number;
+}
+
+interface DOMMatrixInit extends DOMMatrix2DInit {
+  is2D?: boolean;
+  m13?: number;
+  m14?: number;
+  m23?: number;
+  m24?: number;
+  m31?: number;
+  m32?: number;
+  m33?: number;
+  m34?: number;
+  m43?: number;
+  m44?: number;
+}
+
 interface DOMMatrix {
   a: number, b: number, c: number, d: number, e: number, f: number,
   m11: number, m12: number, m13: number, m14: number,
@@ -144,14 +273,31 @@ export interface SaveOptions extends RenderOptions {
   format?: ExportFormat
 }
 
+/** [Skia Canvas Docs](https://skia-canvas.org/api/canvas) */
 export class Canvas {
-  /** @internal */
-  constructor(width?: number, height?: number)
   static contexts: WeakMap<Canvas, readonly CanvasRenderingContext2D[]>
+  /**
+   * Gets or sets the height of a canvas element on a document.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/height)
+   */
+  height: number;
+  /**
+   * Gets or sets the width of a canvas element on a document.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/width)
+   */
+  width: number;
+
+  /** [Skia Canvas Docs](https://skia-canvas.org/api/canvas#creating-new-canvas-objects) */
+  constructor(width?: number, height?: number)
 
-  width: number
-  height: number
-
+  /**
+   * Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
+   * @param type The type of canvas to create. Skia Canvas only supports a 2-D context using canvas.getContext("2d")
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext)
+   */
   getContext(type?: "2d"): CanvasRenderingContext2D
   newPage(width?: number, height?: number): CanvasRenderingContext2D
   readonly pages: CanvasRenderingContext2D[]
@@ -175,19 +321,75 @@ export class Canvas {
 }
 
 //
-// CanvasPattern
+// Patterns
 //
 
+/**
+ * An opaque object describing a pattern, based on an image, a canvas, or a video, created by the CanvasRenderingContext2D.createPattern() method.
+ *
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasPattern)
+ */
 export class CanvasPattern{
   setTransform(transform: Matrix): void;
   setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
 }
 
+/**
+ * An opaque object describing a gradient. It is returned by the methods CanvasRenderingContext2D.createLinearGradient() or CanvasRenderingContext2D.createRadialGradient().
+ *
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasGradient)
+ */
+interface CanvasGradient {
+  /**
+   * Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
+   *
+   * Throws an "IndexSizeError" DOMException if the offset is out of range. Throws a "SyntaxError" DOMException if the color cannot be parsed.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasGradient/addColorStop)
+   */
+  addColorStop(offset: number, color: string): void;
+}
+
+declare var CanvasGradient: {
+  prototype: CanvasGradient;
+  new(): CanvasGradient;
+};
+
+
+export class CanvasTexture {}
+
+
 //
 // Context
 //
 
+type CanvasDrawable = Canvas | Image | ImageData;
+type CanvasPatternSource = Canvas | Image;
+type CanvasDirection = "inherit" | "ltr" | "rtl";
+type CanvasFillRule = "evenodd" | "nonzero";
+type CanvasFontStretch = "condensed" | "expanded" | "extra-condensed" | "extra-expanded" | "normal" | "semi-condensed" | "semi-expanded" | "ultra-condensed" | "ultra-expanded";
+type CanvasTextAlign = "center" | "end" | "left" | "right" | "start";
+type CanvasTextBaseline = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
+type CanvasLineCap = "butt" | "round" | "square";
+type CanvasLineJoin = "bevel" | "miter" | "round";
+// type CanvasFontKerning = "auto" | "none" | "normal";
+// type CanvasFontVariantCaps = "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase";
+// type CanvasTextRendering = "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed";
+
 type Offset = [x: number, y: number] | number
+type QuadOrRect = [x1:number, y1:number, x2:number, y2:number, x3:number, y3:number, x4:number, y4:number] |
+                  [left:number, top:number, right:number, bottom:number] | [width:number, height:number]
+type GlobalCompositeOperation = "color" | "color-burn" | "color-dodge" | "copy" | "darken" | "destination-atop" | "destination-in" | "destination-out" | "destination-over" | "difference" | "exclusion" | "hard-light" | "hue" | "lighten" | "lighter" | "luminosity" | "multiply" | "overlay" | "saturation" | "screen" | "soft-light" | "source-atop" | "source-in" | "source-out" | "source-over" | "xor";
+type ImageSmoothingQuality = "high" | "low" | "medium";
+
+type FontVariantSetting = "normal" |
+/* alternates */ "historical-forms" |
+/* caps */ "small-caps" | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps" |
+/* numeric */ "lining-nums" | "oldstyle-nums" | "proportional-nums" | "tabular-nums" | "diagonal-fractions" | "stacked-fractions" | "ordinal" | "slashed-zero" |
+/* ligatures */ "common-ligatures" | "no-common-ligatures" | "discretionary-ligatures" | "no-discretionary-ligatures" | "historical-ligatures" | "no-historical-ligatures" | "contextual" | "no-contextual" |
+/* east-asian */ "jis78" | "jis83" | "jis90" | "jis04" | "simplified" | "traditional" | "full-width" | "proportional-width" | "ruby" |
+/* position */ "super" | "sub";
+
 
 export interface CreateTextureOptions {
   /** The 2D shape to be drawn in a repeating grid with the specified spacing (if omitted, parallel lines will be used) */
@@ -206,8 +408,12 @@ export interface CreateTextureOptions {
   offset?: Offset
 }
 
-export type CanvasPatternSource = Canvas | Image;
-export type CanvasDrawable = Canvas | Image | ImageData;
+interface CanvasCompositing {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalAlpha) */
+  globalAlpha: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) */
+  globalCompositeOperation: GlobalCompositeOperation;
+}
 
 interface CanvasDrawImage {
   drawImage(image: CanvasDrawable, dx: number, dy: number): void;
@@ -218,69 +424,228 @@ interface CanvasDrawImage {
   drawCanvas(image: Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
 }
 
+interface CanvasDrawPath {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath) */
+  beginPath(): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip) */
+  clip(fillRule?: CanvasFillRule): void;
+  clip(path: Path2D, fillRule?: CanvasFillRule): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fill) */
+  fill(fillRule?: CanvasFillRule): void;
+  fill(path: Path2D, fillRule?: CanvasFillRule): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath) */
+  isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
+  isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke) */
+  isPointInStroke(x: number, y: number): boolean;
+  isPointInStroke(path: Path2D, x: number, y: number): boolean;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke) */
+  stroke(): void;
+  stroke(path: Path2D): void;
+}
+
 interface CanvasFillStrokeStyles {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) */
   fillStyle: string | CanvasGradient | CanvasPattern | CanvasTexture;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle) */
   strokeStyle: string | CanvasGradient | CanvasPattern | CanvasTexture;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createConicGradient) */
   createConicGradient(startAngle: number, x: number, y: number): CanvasGradient;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createLinearGradient) */
   createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
-  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createPattern) */
   createPattern(image: CanvasPatternSource, repetition: string | null): CanvasPattern | null;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createRadialGradient) */
+  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+
+  /** [Skia Canvas Docs](https://skia-canvas.org/api/context#createtexture) */
   createTexture(spacing: Offset, options?: CreateTextureOptions): CanvasTexture
 }
 
-type QuadOrRect = [x1:number, y1:number, x2:number, y2:number, x3:number, y3:number, x4:number, y4:number] |
-                  [left:number, top:number, right:number, bottom:number] | [width:number, height:number]
+interface CanvasFilters {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter) */
+  filter: string;
+}
 
-type CornerRadius = number | DOMPoint
+interface CanvasImageData {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/createImageData) */
+  createImageData(width: number, height: number, settings?: ImageDataSettings): ImageData;
+  createImageData(imagedata: ImageData): ImageData;
 
-interface CanvasTransform extends Omit<globalThis.CanvasTransform, "transform" | "setTransform">{}
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData) */
+  getImageData(x: number, y: number, width: number, height: number, settings?: ImageDataSettings): ImageData;
 
-interface CanvasTextDrawingStyles extends Omit<globalThis.CanvasTextDrawingStyles, "fontKerning" | "fontVariantCaps" | "textRendering">{}
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/putImageData) */
+  putImageData(imagedata: ImageData, dx: number, dy: number): void;
+  putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;
+}
 
-type FontVariantSetting = "normal" |
-/* alternates */ "historical-forms" |
-/* caps */ "small-caps" | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps" |
-/* numeric */ "lining-nums" | "oldstyle-nums" | "proportional-nums" | "tabular-nums" | "diagonal-fractions" | "stacked-fractions" | "ordinal" | "slashed-zero" |
-/* ligatures */ "common-ligatures" | "no-common-ligatures" | "discretionary-ligatures" | "no-discretionary-ligatures" | "historical-ligatures" | "no-historical-ligatures" | "contextual" | "no-contextual" |
-/* east-asian */ "jis78" | "jis83" | "jis90" | "jis04" | "simplified" | "traditional" | "full-width" | "proportional-width" | "ruby" |
-/* position */ "super" | "sub";
+interface CanvasImageSmoothing {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) */
+  imageSmoothingEnabled: boolean;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) */
+  imageSmoothingQuality: ImageSmoothingQuality;
+}
+
+
+interface CanvasPath {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arc) */
+  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/arcTo) */
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo) */
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath) */
+  closePath(): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/ellipse) */
+  ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo) */
+  lineTo(x: number, y: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo) */
+  moveTo(x: number, y: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo) */
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rect) */
+  rect(x: number, y: number, w: number, h: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect) */
+  roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]): void;
+}
+
+
+interface CanvasPathDrawingStyles {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineCap) */
+  lineCap: CanvasLineCap;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) */
+  lineDashOffset: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineJoin) */
+  lineJoin: CanvasLineJoin;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineWidth) */
+  lineWidth: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/miterLimit) */
+  miterLimit: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getLineDash) */
+  getLineDash(): number[];
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash) */
+  setLineDash(segments: Iterable<number>): void;
+}
+
+interface CanvasRect {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clearRect) */
+  clearRect(x: number, y: number, w: number, h: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect) */
+  fillRect(x: number, y: number, w: number, h: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeRect) */
+  strokeRect(x: number, y: number, w: number, h: number): void;
+}
+
+interface CanvasShadowStyles {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowBlur) */
+  shadowBlur: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowColor) */
+  shadowColor: string;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX) */
+  shadowOffsetX: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY) */
+  shadowOffsetY: number;
+}
+
+interface CanvasState {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/reset) */
+  reset(): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/restore) */
+  restore(): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/save) */
+  save(): void;
+
+  // UNIMPLEMENTED
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isContextLost) */
+  // isContextLost(): boolean;
+}
+
+interface CanvasText {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillText) */
+  fillText(text: string, x: number, y: number, maxWidth?: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/measureText) */
+  measureText(text: string): TextMetrics;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeText) */
+  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
+}
+
+interface CanvasTextDrawingStyles {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/direction) */
+    direction: CanvasDirection;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/font) */
+    font: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontStretch) */
+    fontStretch: CanvasFontStretch;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/letterSpacing) */
+    letterSpacing: string;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) */
+    textAlign: CanvasTextAlign;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline) */
+    textBaseline: CanvasTextBaseline;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/wordSpacing) */
+    wordSpacing: string;
+
+    // UNIMPLEMENTED
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textRendering) */
+    // textRendering: CanvasTextRendering;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontKerning) */
+    // fontKerning: CanvasFontKerning;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps) */
+    // fontVariantCaps: CanvasFontVariantCaps;
+}
+
+
+interface CanvasTransform {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getTransform) */
+  getTransform(): DOMMatrix;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/resetTransform) */
+  resetTransform(): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/rotate) */
+  rotate(angle: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/scale) */
+  scale(x: number, y: number): void;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform) */
+  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
 
+  /** transform argument extensions (accept DOMMatrix & matrix-like objectx, not just param lists) */
+  setTransform(transform?: Matrix): void
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/transform) */
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void
+  transform(transform: Matrix): void
 
-export interface CanvasRenderingContext2D extends CanvasCompositing, CanvasDrawImage, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform, CanvasUserInterface {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/translate) */
+  translate(x: number, y: number): void;
+}
+
+/**
+ * The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.
+ *
+ * - [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D)
+ * - [Skia Canvas Docs](https://skia-canvas.org/api/context)
+ */
+export interface CanvasRenderingContext2D extends CanvasCompositing, CanvasDrawImage, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageData, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/canvas) */
   readonly canvas: Canvas
   fontVariant: FontVariantSetting
+  fontHinting: boolean
   textWrap: boolean
   textDecoration: string
   lineDashMarker: Path2D | null
   lineDashFit: "move" | "turn" | "follow"
 
-  // transform argument extensions (accept DOMMatrix & matrix-like objectx, not just param lists)
-  setTransform(transform?: Matrix): void
-  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
-
-  transform(transform: Matrix): void
-  transform(a: number, b: number, c: number, d: number, e: number, f: number): void
-
+  // skia/chrome beziers & convenience methods
   get currentTransform(): DOMMatrix
   set currentTransform(matrix: Matrix)
   createProjection(quad: QuadOrRect, basis?: QuadOrRect): DOMMatrix
-
-  // skia/chrome beziers & convenience methods
   conicCurveTo(cpx: number, cpy: number, x: number, y: number, weight: number): void
-  roundRect(x: number, y: number, width: number, height: number, radii: number | CornerRadius[]): void
-  reset(): void
   // getContextAttributes(): CanvasRenderingContext2DSettings;
 
-  // add maxWidth to work in conjunction with textWrap
+  // add optional maxWidth to work in conjunction with textWrap
   measureText(text: string, maxWidth?: number): TextMetrics
   outlineText(text: string, maxWidth?: number): Path2D
-
-  // use the local definitions for settings w/ supported ColorType values
-  createImageData(width: number, height: number, settings?: ImageDataSettings): ImageData;
-  createImageData(imagedata: ImageData): ImageData;
-  getImageData(x: number, y: number, width: number, height: number, settings?: ImageDataSettings): ImageData;
-  putImageData(imagedata: ImageData, dx: number, dy: number): void;
-  putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void;
 }
 
 //
@@ -298,10 +663,22 @@ export interface Path2DBounds {
 
 export type Path2DEdge = [verb: string, ...args: number[]]
 
-export class Path2D extends globalThis.Path2D {
-  d: string
+/**
+ * This Canvas 2D API interface is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.
+ *
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Path2D)
+ */
+interface Path2D extends CanvasPath {
   readonly bounds: Path2DBounds
   readonly edges: readonly Path2DEdge[]
+  d: string
+
+  /**
+   * Adds the path given by the argument to the path
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Path2D/addPath)
+   */
+  addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
 
   contains(x: number, y: number): boolean
   conicCurveTo(
@@ -312,8 +689,6 @@ export class Path2D extends globalThis.Path2D {
     weight: number
   ): void
 
-  roundRect(x: number, y: number, width: number, height: number, radii: number | CornerRadius[]): void
-
   complement(otherPath: Path2D): Path2D
   difference(otherPath: Path2D): Path2D
   intersect(otherPath: Path2D): Path2D
@@ -334,14 +709,56 @@ export class Path2D extends globalThis.Path2D {
   unwind(): Path2D
 }
 
+declare var Path2D: {
+  prototype: Path2D;
+  new(path?: Path2D | string): Path2D;
+}
+
 //
 // Typography
 //
 
-export interface TextMetrics extends globalThis.TextMetrics {
-  lines: TextMetricsLine[]
+
+/**
+ * The dimensions of a piece of text in the canvas, as created by the CanvasRenderingContext2D.measureText() method.
+ *
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics)
+ */
+interface TextMetrics {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxAscent) */
+  readonly actualBoundingBoxAscent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxDescent) */
+  readonly actualBoundingBoxDescent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxLeft) */
+  readonly actualBoundingBoxLeft: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/actualBoundingBoxRight) */
+  readonly actualBoundingBoxRight: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/alphabeticBaseline) */
+  readonly alphabeticBaseline: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/emHeightAscent) */
+  readonly emHeightAscent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/emHeightDescent) */
+  readonly emHeightDescent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/fontBoundingBoxAscent) */
+  readonly fontBoundingBoxAscent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/fontBoundingBoxDescent) */
+  readonly fontBoundingBoxDescent: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/hangingBaseline) */
+  readonly hangingBaseline: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/ideographicBaseline) */
+  readonly ideographicBaseline: number;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextMetrics/width) */
+  readonly width: number;
+
+  /** Individual metrics for each line (only applicable when context's textWrap is set to `true` ) */
+  readonly lines: TextMetricsLine[]
 }
 
+declare var TextMetrics: {
+  prototype: TextMetrics;
+  new(): TextMetrics;
+};
+
 export interface TextMetricsLine {
   readonly x: number
   readonly y: number
@@ -367,7 +784,7 @@ export interface Font {
   file: string
 }
 
-export interface FontLibrary {
+interface FontLibrary {
   families: readonly string[]
   family(name: string): FontFamily | undefined
   has(familyName: string): boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skia-canvas",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A GPU-accelerated Canvas Graphics API for Node",
   "author": "Christian Swinehart <drafting@samizdat.co>",
   "license": "MIT",