@codehz/draw-call 0.4.2 → 0.4.5

package/browser/index.cjs

@@ -1,7 +1,7 @@
 
 //#region src/compat/index.ts
-const DOMMatrix = window.DOMMatrix;
-const Path2D = window.Path2D;
+const DOMMatrix = typeof window !== "undefined" ? window.DOMMatrix : void 0;
+const Path2D = typeof window !== "undefined" ? window.Path2D : void 0;
 function createRawCanvas(width, height) {
 	const canvas = document.createElement("canvas");
 	canvas.width = width;
@@ -1851,6 +1851,19 @@ function createCanvas(options) {
 				minHeight: 0,
 				maxHeight: height
 			});
+			if (options.fitContent) {
+				const contentWidth = layoutTree.layout.width;
+				const contentHeight = layoutTree.layout.height;
+				if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
+					canvas.width = contentWidth * pixelRatio;
+					canvas.height = contentHeight * pixelRatio;
+					if ("style" in canvas) {
+						canvas.style.width = `${contentWidth}px`;
+						canvas.style.height = `${contentHeight}px`;
+					}
+					if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
+				}
+			}
 			renderNode(ctx, layoutTree);
 			return layoutTree;
 		},

package/browser/index.d.cts

@@ -1,3 +1,5 @@
+import { ReadableStream } from "node:stream/web";
+
 //#region src/types/base.d.ts
 type Size = number | `${number}%` | "auto" | "fill";
 interface ColorStop {
@@ -335,7 +337,7 @@ interface TransformSimpleObject {
   /** 垂直偏移角度（弧度） */
   skewY?: number;
 }
-interface DOMMatrix2DInit {
+interface DOMMatrix2DInit$1 {
   a?: number;
   b?: number;
   c?: number;
@@ -343,7 +345,7 @@ interface DOMMatrix2DInit {
   e?: number;
   f?: number;
 }
-type TransformValue = TransformSimpleObject | DOMMatrix2DInit | [number, number, number, number, number, number];
+type TransformValue = TransformSimpleObject | DOMMatrix2DInit$1 | [number, number, number, number, number, number];
 interface TransformProps {
   children: Element;
   /** 变换值（rotate/skew 使用弧度） */
@@ -363,28 +365,570 @@ interface CustomDrawElement extends ElementBase, CustomDrawProps {
 }
 type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | TransformElement | CustomDrawElement;
 //#endregion
+//#region node_modules/@napi-rs/canvas/index.d.ts
+interface CanvasRenderingContext2D$1 extends CanvasCompositing, CanvasDrawPath, CanvasFillStrokeStyles, CanvasFilters, CanvasImageData, CanvasImageSmoothing, CanvasPath, CanvasPathDrawingStyles, CanvasRect, CanvasSettings, CanvasShadowStyles, CanvasState, CanvasText, CanvasTextDrawingStyles, CanvasTransform, CanvasPDFAnnotations {}
+interface CanvasState {
+  isContextLost(): boolean;
+  reset(): void;
+  restore(): void;
+  save(): void;
+}
+interface CanvasShadowStyles {
+  shadowBlur: number;
+  shadowColor: string;
+  shadowOffsetX: number;
+  shadowOffsetY: number;
+}
+interface CanvasRenderingContext2DSettings {
+  alpha?: boolean;
+  colorSpace?: PredefinedColorSpace;
+  desynchronized?: boolean;
+  willReadFrequently?: boolean;
+}
+interface CanvasSettings {
+  getContextAttributes(): CanvasRenderingContext2DSettings;
+}
+interface CanvasRect {
+  clearRect(x: number, y: number, w: number, h: number): void;
+  fillRect(x: number, y: number, w: number, h: number): void;
+  strokeRect(x: number, y: number, w: number, h: number): void;
+}
+interface TextMetrics {
+  readonly actualBoundingBoxAscent: number;
+  readonly actualBoundingBoxDescent: number;
+  readonly actualBoundingBoxLeft: number;
+  readonly actualBoundingBoxRight: number;
+  readonly alphabeticBaseline: number;
+  readonly emHeightAscent: number;
+  readonly emHeightDescent: number;
+  readonly fontBoundingBoxAscent: number;
+  readonly fontBoundingBoxDescent: number;
+  readonly hangingBaseline: number;
+  readonly ideographicBaseline: number;
+  readonly width: number;
+}
+interface CanvasText {
+  fillText(text: string, x: number, y: number, maxWidth?: number): void;
+  measureText(text: string): TextMetrics;
+  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
+}
+type CanvasLineCap = 'butt' | 'round' | 'square';
+type CanvasLineJoin = 'bevel' | 'miter' | 'round';
+interface CanvasPathDrawingStyles {
+  lineCap: CanvasLineCap;
+  lineDashOffset: number;
+  lineJoin: CanvasLineJoin;
+  lineWidth: number;
+  miterLimit: number;
+  getLineDash(): number[];
+  setLineDash(segments: number[]): void;
+}
+interface CanvasPath {
+  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+  closePath(): void;
+  ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+  lineTo(x: number, y: number): void;
+  moveTo(x: number, y: number): void;
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  rect(x: number, y: number, w: number, h: number): void;
+  roundRect(x: number, y: number, w: number, h: number, radii?: number | DOMPointInit | (number | DOMPointInit)[]): void;
+}
+type ImageSmoothingQuality = 'high' | 'low' | 'medium';
+interface CanvasImageSmoothing {
+  imageSmoothingEnabled: boolean;
+  imageSmoothingQuality: ImageSmoothingQuality;
+}
+interface CanvasTransform {
+  resetTransform(): void;
+  rotate(angle: number): void;
+  scale(x: number, y: number): void;
+  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+  setTransform(transform?: DOMMatrix2DInit): void;
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+  translate(x: number, y: number): void;
+}
+interface CanvasPDFAnnotations {
+  /**
+   * Create a clickable URL link annotation in a PDF document.
+   * This is only effective when used with PDF documents.
+   * @param left - Left coordinate of the link rectangle
+   * @param top - Top coordinate of the link rectangle
+   * @param right - Right coordinate of the link rectangle
+   * @param bottom - Bottom coordinate of the link rectangle
+   * @param url - The URL to link to
+   */
+  annotateLinkUrl(left: number, top: number, right: number, bottom: number, url: string): void;
+  /**
+   * Create a named destination at a specific point in a PDF document.
+   * This destination can be used as a target for internal links.
+   * @param x - X coordinate of the destination point
+   * @param y - Y coordinate of the destination point
+   * @param name - Name identifier for the destination
+   */
+  annotateNamedDestination(x: number, y: number, name: string): void;
+  /**
+   * Create a link to a named destination within the PDF document.
+   * This is only effective when used with PDF documents.
+   * @param left - Left coordinate of the link rectangle
+   * @param top - Top coordinate of the link rectangle
+   * @param right - Right coordinate of the link rectangle
+   * @param bottom - Bottom coordinate of the link rectangle
+   * @param name - Name of the destination to link to
+   */
+  annotateLinkToDestination(left: number, top: number, right: number, bottom: number, name: string): void;
+}
+type PredefinedColorSpace = 'display-p3' | 'srgb';
+interface ImageDataSettings {
+  colorSpace?: PredefinedColorSpace;
+}
+interface CanvasImageData {
+  createImageData(sw: number, sh: number, settings?: ImageDataSettings): ImageData;
+  createImageData(imagedata: ImageData): ImageData;
+  getImageData(sx: number, sy: number, sw: number, sh: 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;
+}
+type CanvasDirection = 'inherit' | 'ltr' | 'rtl';
+type CanvasFontKerning = 'auto' | 'none' | 'normal';
+type CanvasFontStretch = 'condensed' | 'expanded' | 'extra-condensed' | 'extra-expanded' | 'normal' | 'semi-condensed' | 'semi-expanded' | 'ultra-condensed' | 'ultra-expanded';
+type CanvasFontVariantCaps = 'all-petite-caps' | 'all-small-caps' | 'normal' | 'petite-caps' | 'small-caps' | 'titling-caps' | 'unicase';
+type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
+type CanvasTextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
+type CanvasTextRendering = 'auto' | 'geometricPrecision' | 'optimizeLegibility' | 'optimizeSpeed';
+interface CanvasTextDrawingStyles {
+  direction: CanvasDirection;
+  font: string;
+  fontKerning: CanvasFontKerning;
+  fontStretch: CanvasFontStretch;
+  fontVariantCaps: CanvasFontVariantCaps;
+  letterSpacing: string;
+  textAlign: CanvasTextAlign;
+  textBaseline: CanvasTextBaseline;
+  textRendering: CanvasTextRendering;
+  wordSpacing: string;
+  fontVariationSettings: string;
+  lang: string;
+}
+interface CanvasFilters {
+  filter: string;
+}
+interface CanvasFillStrokeStyles {
+  fillStyle: string | CanvasGradient$1 | CanvasPattern$1;
+  strokeStyle: string | CanvasGradient$1 | CanvasPattern$1;
+  createConicGradient(startAngle: number, x: number, y: number): CanvasGradient$1;
+  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient$1;
+  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient$1;
+}
+type CanvasFillRule = 'evenodd' | 'nonzero';
+interface CanvasDrawPath {
+  beginPath(): void;
+  clip(fillRule?: CanvasFillRule): void;
+  clip(path: Path2D, fillRule?: CanvasFillRule): void;
+  fill(fillRule?: CanvasFillRule): void;
+  fill(path: Path2D, fillRule?: CanvasFillRule): void;
+  isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;
+  isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;
+  isPointInStroke(x: number, y: number): boolean;
+  isPointInStroke(path: Path2D, x: number, y: number): boolean;
+  stroke(): void;
+  stroke(path: Path2D): void;
+}
+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';
+interface CanvasCompositing {
+  globalAlpha: number;
+  globalCompositeOperation: GlobalCompositeOperation;
+}
+interface DOMPointInit {
+  w?: number;
+  x?: number;
+  y?: number;
+  z?: number;
+}
+interface CanvasPattern$1 {
+  setTransform(transform?: DOMMatrix2DInit): void;
+}
+interface CanvasGradient$1 {
+  addColorStop(offset: number, color: string): void;
+}
+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;
+} // ----------- added types
+interface DOMMatrix2DInit {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+}
+interface DOMMatrixReadOnly {
+  readonly a: number;
+  readonly b: number;
+  readonly c: number;
+  readonly d: number;
+  readonly e: number;
+  readonly f: number;
+  readonly is2D: boolean;
+  readonly isIdentity: boolean;
+  readonly m11: number;
+  readonly m12: number;
+  readonly m13: number;
+  readonly m14: number;
+  readonly m21: number;
+  readonly m22: number;
+  readonly m23: number;
+  readonly m24: number;
+  readonly m31: number;
+  readonly m32: number;
+  readonly m33: number;
+  readonly m34: number;
+  readonly m41: number;
+  readonly m42: number;
+  readonly m43: number;
+  readonly m44: number;
+  flipX(): DOMMatrix;
+  flipY(): DOMMatrix;
+  inverse(): DOMMatrix;
+  multiply(other?: DOMMatrixInit): DOMMatrix;
+  rotate(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
+  rotateAxisAngle(x?: number, y?: number, z?: number, angle?: number): DOMMatrix;
+  rotateFromVector(x?: number, y?: number): DOMMatrix;
+  scale(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+  scale3d(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+  skewX(sx?: number): DOMMatrix;
+  skewY(sy?: number): DOMMatrix;
+  toFloat32Array(): Float32Array;
+  toFloat64Array(): Float64Array;
+  transformPoint(point?: DOMPointInit): DOMPoint;
+  translate(tx?: number, ty?: number, tz?: number): DOMMatrix;
+  toString(): string;
+}
+interface DOMMatrix extends DOMMatrixReadOnly {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+  m11: number;
+  m12: number;
+  m13: number;
+  m14: number;
+  m21: number;
+  m22: number;
+  m23: number;
+  m24: number;
+  m31: number;
+  m32: number;
+  m33: number;
+  m34: number;
+  m41: number;
+  m42: number;
+  m43: number;
+  m44: number;
+  invertSelf(): DOMMatrix;
+  multiplySelf(other?: DOMMatrixInit): DOMMatrix;
+  preMultiplySelf(other?: DOMMatrixInit): DOMMatrix;
+  rotateAxisAngleSelf(x?: number, y?: number, z?: number, angle?: number): DOMMatrix;
+  rotateFromVectorSelf(x?: number, y?: number): DOMMatrix;
+  rotateSelf(rotX?: number, rotY?: number, rotZ?: number): DOMMatrix;
+  scale3dSelf(scale?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+  scaleSelf(scaleX?: number, scaleY?: number, scaleZ?: number, originX?: number, originY?: number, originZ?: number): DOMMatrix;
+  setMatrixValue(transformList: string): DOMMatrix;
+  skewXSelf(sx?: number): DOMMatrix;
+  skewYSelf(sy?: number): DOMMatrix;
+  translateSelf(tx?: number, ty?: number, tz?: number): DOMMatrix;
+  toJSON(): { [K in OmitNeverOfMatrix]: DOMMatrix[K] };
+}
+type OmitMatrixMethod = { [K in keyof DOMMatrix]: DOMMatrix[K] extends ((...args: any[]) => any) ? never : K };
+type OmitNeverOfMatrix = OmitMatrixMethod[keyof OmitMatrixMethod];
+declare const DOMMatrix: {
+  prototype: DOMMatrix;
+  new (init?: string | number[]): DOMMatrix;
+  fromFloat32Array(array32: Float32Array): DOMMatrix;
+  fromFloat64Array(array64: Float64Array): DOMMatrix;
+  fromMatrix(other?: DOMMatrixInit): DOMMatrix;
+};
+interface DOMPointReadOnly {
+  readonly w: number;
+  readonly x: number;
+  readonly y: number;
+  readonly z: number;
+  matrixTransform(matrix?: DOMMatrixInit): DOMPoint;
+}
+interface DOMPoint extends DOMPointReadOnly {
+  w: number;
+  x: number;
+  y: number;
+  z: number;
+  toJSON(): Omit<DOMPoint, 'matrixTransform' | 'toJSON'>;
+}
+declare const DOMPoint: {
+  prototype: DOMPoint;
+  new (x?: number, y?: number, z?: number, w?: number): DOMPoint;
+  fromPoint(other?: DOMPointInit): DOMPoint;
+};
+declare class ImageData {
+  /**
+   * Returns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.
+   */
+  readonly data: Uint8ClampedArray;
+  /**
+   * Returns the actual dimensions of the data in the ImageData object, in pixels.
+   */
+  readonly height: number;
+  /**
+   * Returns the actual dimensions of the data in the ImageData object, in pixels.
+   */
+  readonly width: number;
+  constructor(sw: number, sh: number, attr?: {
+    colorSpace?: ColorSpace;
+  });
+  constructor(imageData: ImageData, attr?: {
+    colorSpace?: ColorSpace;
+  });
+  constructor(data: Uint8ClampedArray | Uint16Array | Float16Array | Float32Array, sw: number, sh?: number);
+}
+declare class Image$1 {
+  constructor(); // attrs only affects SVG
+  constructor(width: number, height: number, attrs?: {
+    colorSpace?: ColorSpace;
+  });
+  width: number;
+  height: number;
+  readonly naturalWidth: number;
+  readonly naturalHeight: number;
+  readonly complete: boolean;
+  readonly currentSrc: string | null;
+  alt: string; // the src can be a Uint8Array or a string
+  // if it's a string, it can be a file path, a data URL, a remote URL, or a SVG string
+  src: Uint8Array | string;
+  onload?(): void;
+  onerror?(err: Error): void;
+  decode(): Promise<void>;
+}
+declare class Path2D {
+  constructor(path?: Path2D | string);
+  addPath(path: Path2D, transform?: DOMMatrix2DInit): void;
+  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+  closePath(): void;
+  ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
+  lineTo(x: number, y: number): void;
+  moveTo(x: number, y: number): void;
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+  rect(x: number, y: number, w: number, h: number): void;
+  roundRect(x: number, y: number, w: number, h: number, radii?: number | number[]): void; // PathKit methods
+  op(path: Path2D, operation: PathOp): Path2D;
+  toSVGString(): string;
+  getFillType(): FillType;
+  getFillTypeString(): string;
+  setFillType(type: FillType): void;
+  simplify(): Path2D;
+  asWinding(): Path2D;
+  stroke(stroke?: StrokeOptions): Path2D;
+  transform(transform: DOMMatrix2DInit): Path2D;
+  getBounds(): [left: number, top: number, right: number, bottom: number];
+  computeTightBounds(): [left: number, top: number, right: number, bottom: number];
+  trim(start: number, end: number, isComplement?: boolean): Path2D;
+  dash(on: number, off: number, phase: number): Path2D;
+  round(radius: number): Path2D;
+  equals(path: Path2D): boolean;
+}
+interface StrokeOptions {
+  width?: number;
+  miterLimit?: number;
+  cap?: StrokeCap;
+  join?: StrokeJoin;
+}
+interface SKRSContext2D extends CanvasRenderingContext2D$1 {
+  canvas: Canvas;
+  /**
+   * @param startAngle The angle at which to begin the gradient, in radians. Angle measurements start vertically above the centre and move around clockwise.
+   * @param x The x-axis coordinate of the centre of the gradient.
+   * @param y The y-axis coordinate of the centre of the gradient.
+   */
+  createConicGradient(startAngle: number, x: number, y: number): CanvasGradient$1;
+  drawImage(image: Image$1 | Canvas, dx: number, dy: number): void;
+  drawImage(image: Image$1 | Canvas, dx: number, dy: number, dw: number, dh: number): void;
+  drawImage(image: Image$1 | Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
+  createPattern(image: Image$1 | ImageData | Canvas | SvgCanvas, repeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | null): CanvasPattern$1;
+  getContextAttributes(): {
+    alpha: boolean;
+    desynchronized: boolean;
+  };
+  getTransform(): DOMMatrix;
+  letterSpacing: string;
+  wordSpacing: string;
+}
+type ColorSpace = 'srgb' | 'display-p3';
+interface ContextAttributes {
+  alpha?: boolean;
+  colorSpace?: ColorSpace;
+}
+interface SvgCanvas {
+  width: number;
+  height: number;
+  getContext(contextType: '2d', contextAttributes?: ContextAttributes): SKRSContext2D;
+  getContent(): Buffer;
+}
+interface AvifConfig {
+  /** 0-100 scale, 100 is lossless */
+  quality?: number;
+  /** 0-100 scale */
+  alphaQuality?: number;
+  /** rav1e preset 1 (slow) 10 (fast but crappy), default is 4 */
+  speed?: number;
+  /** How many threads should be used (0 = match core count) */
+  threads?: number;
+  /** set to '4:2:0' to use chroma subsampling, default '4:4:4' */
+  chromaSubsampling?: ChromaSubsampling;
+}
+/**
+ * https://en.wikipedia.org/wiki/Chroma_subsampling#Types_of_sampling_and_subsampling
+ * https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_concepts
+ */
+declare enum ChromaSubsampling {
+  /**
+   * Each of the three Y'CbCr components has the same sample rate, thus there is no chroma subsampling. This scheme is sometimes used in high-end film scanners and cinematic post-production.
+   * Note that "4:4:4" may instead be wrongly referring to R'G'B' color space, which implicitly also does not have any chroma subsampling (except in JPEG R'G'B' can be subsampled).
+   * Formats such as HDCAM SR can record 4:4:4 R'G'B' over dual-link HD-SDI.
+   */
+  Yuv444 = 0,
+  /**
+   * The two chroma components are sampled at half the horizontal sample rate of luma: the horizontal chroma resolution is halved. This reduces the bandwidth of an uncompressed video signal by one-third.
+   * Many high-end digital video formats and interfaces use this scheme:
+   * - [AVC-Intra 100](https://en.wikipedia.org/wiki/AVC-Intra)
+   * - [Digital Betacam](https://en.wikipedia.org/wiki/Betacam#Digital_Betacam)
+   * - [Betacam SX](https://en.wikipedia.org/wiki/Betacam#Betacam_SX)
+   * - [DVCPRO50](https://en.wikipedia.org/wiki/DV#DVCPRO) and [DVCPRO HD](https://en.wikipedia.org/wiki/DV#DVCPRO_HD)
+   * - [Digital-S](https://en.wikipedia.org/wiki/Digital-S)
+   * - [CCIR 601](https://en.wikipedia.org/wiki/Rec._601) / [Serial Digital Interface](https://en.wikipedia.org/wiki/Serial_digital_interface) / [D1](https://en.wikipedia.org/wiki/D-1_(Sony))
+   * - [ProRes (HQ, 422, LT, and Proxy)](https://en.wikipedia.org/wiki/Apple_ProRes)
+   * - [XDCAM HD422](https://en.wikipedia.org/wiki/XDCAM)
+   * - [Canon MXF HD422](https://en.wikipedia.org/wiki/Canon_XF-300)
+   */
+  Yuv422 = 1,
+  /**
+   * n 4:2:0, the horizontal sampling is doubled compared to 4:1:1,
+   * but as the **Cb** and **Cr** channels are only sampled on each alternate line in this scheme, the vertical resolution is halved.
+   * The data rate is thus the same.
+   * This fits reasonably well with the PAL color encoding system, since this has only half the vertical chrominance resolution of [NTSC](https://en.wikipedia.org/wiki/NTSC).
+   * It would also fit extremely well with the [SECAM](https://en.wikipedia.org/wiki/SECAM) color encoding system,
+   * since like that format, 4:2:0 only stores and transmits one color channel per line (the other channel being recovered from the previous line).
+   * However, little equipment has actually been produced that outputs a SECAM analogue video signal.
+   * In general, SECAM territories either have to use a PAL-capable display or a [transcoder](https://en.wikipedia.org/wiki/Transcoding) to convert the PAL signal to SECAM for display.
+   */
+  Yuv420 = 2,
+  /**
+   * What if the chroma subsampling model is 4:0:0?
+   * That says to use every pixel of luma data, but that each row has 0 chroma samples applied to it. The resulting image, then, is comprised solely of the luminance data—a greyscale image.
+   */
+  Yuv400 = 3
+}
+interface ConvertToBlobOptions {
+  mime?: string;
+  quality?: number;
+}
+declare class Canvas {
+  constructor(width: number, height: number, flag?: SvgExportFlag);
+  width: number;
+  height: number;
+  getContext(contextType: '2d', contextAttributes?: ContextAttributes): SKRSContext2D;
+  encodeSync(format: 'webp' | 'jpeg', quality?: number): Buffer;
+  encodeSync(format: 'png'): Buffer;
+  encodeSync(format: 'avif', cfg?: AvifConfig): Buffer;
+  encodeSync(format: 'gif', quality?: number): Buffer;
+  encode(format: 'webp' | 'jpeg', quality?: number): Promise<Buffer>;
+  encode(format: 'png'): Promise<Buffer>;
+  encode(format: 'avif', cfg?: AvifConfig): Promise<Buffer>;
+  encode(format: 'gif', quality?: number): Promise<Buffer>;
+  encodeStream(format: 'webp' | 'jpeg', quality?: number): ReadableStream<Buffer>;
+  encodeStream(format: 'png'): ReadableStream<Buffer>;
+  toBuffer(mime: 'image/png'): Buffer;
+  toBuffer(mime: 'image/jpeg' | 'image/webp', quality?: number): Buffer;
+  toBuffer(mime: 'image/avif', cfg?: AvifConfig): Buffer;
+  toBuffer(mime: 'image/gif', quality?: number): Buffer; // raw pixels
+  data(): Buffer;
+  toDataURL(mime?: 'image/png'): string;
+  toDataURL(mime: 'image/jpeg' | 'image/webp', quality?: number): string;
+  toDataURL(mime: 'image/gif', quality?: number): string;
+  toDataURL(mime?: 'image/jpeg' | 'image/webp' | 'image/png' | 'image/gif', quality?: number): string;
+  toDataURL(mime?: 'image/avif', cfg?: AvifConfig): string;
+  toDataURLAsync(mime?: 'image/png'): Promise<string>;
+  toDataURLAsync(mime: 'image/jpeg' | 'image/webp', quality?: number): Promise<string>;
+  toDataURLAsync(mime: 'image/gif', quality?: number): Promise<string>;
+  toDataURLAsync(mime?: 'image/jpeg' | 'image/webp' | 'image/png' | 'image/gif', quality?: number): Promise<string>;
+  toDataURLAsync(mime?: 'image/avif', cfg?: AvifConfig): Promise<string>;
+  toBlob(callback: (blob: Blob | null) => void, mime?: string, quality?: number): void;
+  convertToBlob(options?: ConvertToBlobOptions): Promise<Blob>;
+}
+declare enum PathOp {
+  Difference = 0,
+  // subtract the op path from the first path
+  Intersect = 1,
+  // intersect the two paths
+  Union = 2,
+  // union (inclusive-or) the two paths
+  Xor = 3,
+  // exclusive-or the two paths
+  ReverseDifference = 4 // subtract the first path from the op path
+}
+declare enum FillType {
+  Winding = 0,
+  EvenOdd = 1,
+  InverseWinding = 2,
+  InverseEvenOdd = 3
+}
+declare enum StrokeJoin {
+  Miter = 0,
+  Round = 1,
+  Bevel = 2
+}
+declare enum StrokeCap {
+  Butt = 0,
+  Round = 1,
+  Square = 2
+}
+declare enum SvgExportFlag {
+  ConvertTextToPaths = 0x01,
+  NoPrettyXML = 0x02,
+  RelativePathEncoding = 0x04
+}
+//#endregion
 //#region src/canvas.d.ts
-interface CanvasOptions {
+interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
   width: number;
   height: number;
   pixelRatio?: number;
+  /** 根据内容调整画布大小 */
+  fitContent?: boolean;
   imageSmoothingEnabled?: boolean;
   imageSmoothingQuality?: "low" | "medium" | "high";
-  canvas?: {
-    getContext(type: "2d"): CanvasRenderingContext2D | null;
-    width: number;
-    height: number;
-  };
+  canvas?: T;
 }
 interface LayoutSize {
   width: number;
   height: number;
 }
-interface DrawCallCanvas {
+interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
-  readonly canvas: HTMLCanvasElement;
+  readonly canvas: T;
   render(element: Element): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
@@ -396,7 +940,7 @@ interface DrawCallCanvas {
  *
  * 在浏览器环境中使用，支持传入已有的 canvas 实例
  */
-declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
+declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
 //#endregion
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;