Upgrading skia-canvas from 3.x to 4.x
Comparison of the public API of skia-canvas 3.0.8 and 4.0.0, computed automatically from their TypeScript types. A changed signature is a candidate for a breaking change, not a certainty.
Summary
| Removed import paths | 0 |
|---|---|
| Removed exports | 0 |
| Changed signatures | 13 |
| Removed class or interface members | 2 |
| Changed class or interface members | 44 |
| Newly deprecated | 1 |
| Requirement changes (engines, peer dependencies) | 0 |
| New exports | 30 |
Removed exports
None detected.
Changed signatures
| export | Before | After |
|---|---|---|
skia-canvas · Matrix | string | DOMMatrix | { a: number; b: number; c: number; d: number; e: number; f: number; } | FixedLenArray<number, 6> | FixedLenArray<number, 16> | DOMMatrix | TransformString | { a: number; b: number; c: number; d: number; e: number; f: number; } | FixedLenArray<number, 6> | FixedLenArray<number, 16> |
skia-canvas · loadImage | (src: string | URL, options?: RequestInit | undefined): Promise<Image> | (src: any): Promise<Image> | (src: string | URL, options?: any): Promise<Image> | (src: any, options?: any): Promise<Image> |
skia-canvas · ColorSpace | "srgb" | "srgb" | "display-p3" |
skia-canvas · CursorStyle | "copy" | "move" | "none" | "default" | "crosshair" | "hand" | "arrow" | "text" | "wait" | "help" | "progress" | "not-allowed" | "context-menu" | "cell" | "vertical-text" | "alias" | "no-drop" | "grab" | "grabbing" | "all-scroll" | "zoom-in" | "zoom-out" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" | "none" | "copy" | "move" | "default" | "crosshair" | "pointer" | "text" | "wait" | "help" | "progress" | "not-allowed" | "context-menu" | "cell" | "vertical-text" | "alias" | "no-drop" | "grab" | "grabbing" | "all-scroll" | "zoom-in" | "zoom-out" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" |
skia-canvas · ExportFormat | "png" | "jpg" | "jpeg" | "webp" | "raw" | "pdf" | "svg" | "png" | "jpg" | "jpeg" | "webp" | "raw" | "pdf" | "svg" | "image/png" | "image/jpeg" | "image/webp" | "application/pdf" | "image/svg+xml" | "application/octet-stream" |
skia-canvas · WindowEvents | { mousedown: MouseEventProps; mouseup: MouseEventProps; mousemove: MouseEventProps; keydown: KeyboardEventProps; keyup: KeyboardEventProps; input: { data: string; inputType: TextInputType; }; wheel: { deltaX: number; deltaY: number; }; fullscreen: { enabled: boolean; }; move: { left: number; top: number; }; resize: { height: number; width: number; }; frame: { frame: number; }; draw: { frame: number; }; blur: {}; focus: {}; setup: {}; close: {}; } | { mousedown: MouseEventProps; mouseup: MouseEventProps; mousemove: MouseEventProps; mouseenter: MouseEventProps; mouseleave: MouseEventProps; pointerdown: CoalescedPointerEventProps; pointerup: CoalescedPointerEventProps; pointermove: CoalescedPointerEventProps; pointerover: PointerEventProps; pointerenter: PointerEventProps; pointerout: PointerEventProps; pointerleave: PointerEventProps; pointercancel: PointerEventProps; keydown: KeyboardEventProps; keyup: KeyboardEventProps; input: { data: string; inputType: TextInputType; }; compositionstart: CompositionEventProps; compositionupdate: Compos… |
skia-canvas · WindowOptions | { title?: string | undefined; left?: number | undefined; top?: number | undefined; width?: number | undefined; height?: number | undefined; fit?: FitStyle | undefined; page?: number | undefined; background?: string | undefined; fullscreen?: boolean | undefined; borderless?: boolean | undefined; resizable?: boolean | undefined; visible?: boolean | undefined; cursor?: CursorStyle | undefined; canvas?: Canvas | undefined; } & TextOptions | { title?: string | undefined; left?: number | undefined; top?: number | undefined; width?: number | undefined; height?: number | undefined; fit?: FitStyle | undefined; page?: number | undefined; background?: CSSColor | undefined; fullscreen?: boolean | undefined; borderless?: boolean | undefined; resizable?: boolean | undefined; visible?: boolean | undefined; cursor?: CursorStyle | undefined; canvas?: Canvas | undefined; } & TextOptions |
skia-canvas · loadImageData | (src: any, width: number, height?: number | undefined): Promise<ImageData> | (src: any, width: number, height: number, settings?: (ImageDataSettings & RequestInit) | undefined): Promise<ImageData> | (src: Sharp): Promise<ImageData> | (src: any, width: number, height?: number | undefined): Promise<ImageData> | (src: any, width: number, height: number, settings?: any): Promise<ImageData> | (src: Sharp): Promise<ImageData> |
skia-canvas · CanvasDrawable | Image | ImageData | Canvas | Image | ImageData | Canvas | CanvasRenderingContext2D |
skia-canvas · FontVariantSetting | "normal" | "historical-forms" | "small-caps" | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps" | "lining-nums" | "oldstyle-nums" | "proportional-nums" | "tabular-nums" | "diagonal-fractions" | "stacked-fractions" | "ordinal" | "slashed-zero" | "common-ligatures" | "no-common-ligatures" | "discretionary-ligatures" | "no-discretionary-ligatures" | "historical-ligatures" | "no-historical-ligatures" | "contextual" | "no-contextual" | "jis78" | "jis83" | "jis90" | "jis04" | "simplified" | "traditional" | "full-width" | "proportional-width" | "ruby" | "super" | "sub… | (string & {}) | FontVariantKeyword | FontVariantAlternate |
skia-canvas · KeyboardEventProps | { key: string; code: string; location: number; repeat: boolean; ctrlKey: boolean; altKey: boolean; metaKey: boolean; shiftKey: boolean; } | { key: string; code: string; location: number; repeat: boolean; ctrlKey: boolean; altKey: boolean; metaKey: boolean; shiftKey: boolean; preventDefault(): void; } |
skia-canvas · CanvasPatternSource | Image | Canvas | Image | ImageData | Canvas | CanvasRenderingContext2D |
skia-canvas · 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" | "clear" | "color" | "color-burn" | "color-dodge" | "copy" | "darken" | "destination" | "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" |
Removed class or interface members
| member | import | Before |
|---|---|---|
Canvas.toSharpSync | skia-canvas | (options?: RenderOptions | undefined): Sharp |
Canvas.static contexts | skia-canvas | WeakMap<Canvas, readonly CanvasRenderingContext2D[]> |
Changed class or interface members
| member | Before | After |
|---|---|---|
App.eventLoop | EventLoopMode | undefined |
Canvas.toURL | (format: ExportFormat, options?: ExportOptions | undefined): Promise<string> | (format?: ExportFormat | undefined, options?: ExportOptions | undefined): Promise<string> |
Canvas.saveAs | (filename: string, options?: SaveOptions | undefined): Promise<void> | (filename: string | URL, options?: SaveOptions | undefined): Promise<void> |
Canvas.toFile | (filename: string, options?: SaveOptions | undefined): Promise<void> | (filename: string | URL, options?: SaveOptions | undefined): Promise<void> |
Canvas.newPage | (width?: number | undefined, height?: number | undefined): CanvasRenderingContext2D | (settings?: CanvasRenderingContext2DSettings | undefined): CanvasRenderingContext2D | (width?: number | undefined, height?: number | undefined, settings?: CanvasRenderingContext2DSettings | undefined): CanvasRenderingContext2D |
Canvas.toBuffer | (format: ExportFormat, options?: ExportOptions | undefined): Promise<Buffer> | (format?: ExportFormat | undefined, options?: ExportOptions | undefined): Promise<Buffer> |
Canvas.toDataURL | (format: ExportFormat, quality?: number | undefined): string | (format?: ExportFormat | undefined, quality?: number | undefined): string |
Canvas.toURLSync | (format: ExportFormat, options?: ExportOptions | undefined): string | (format?: ExportFormat | undefined, options?: ExportOptions | undefined): string |
Canvas.getContext | (type?: "2d" | undefined): CanvasRenderingContext2D | (type: "2d", settings?: CanvasRenderingContext2DSettings | undefined): CanvasRenderingContext2D | (type?: string | undefined, settings?: CanvasRenderingContext2DSettings | undefined): CanvasRenderingContext2D | null |
Canvas.saveAsSync | (filename: string, options?: SaveOptions | undefined): void | (filename: string | URL, options?: SaveOptions | undefined): void |
Canvas.constructor | (width?: number | undefined, height?: number | undefined, options?: TextOptions | undefined): Canvas | (width?: number | undefined, height?: number | undefined, options?: (TextOptions & CanvasBackend) | undefined): Canvas |
Canvas.toBufferSync | (format: ExportFormat, options?: ExportOptions | undefined): Buffer | (format?: ExportFormat | undefined, options?: ExportOptions | undefined): Buffer |
Canvas.toDataURLSync | (format: ExportFormat, options?: ExportOptions | undefined): string | (format?: ExportFormat | undefined, options?: ExportOptions | undefined): string |
Path2D.points | (step?: number | undefined): readonly [x: number, y: number][] | (step?: number | undefined, mode?: "even" | "exact" | undefined): readonly [x: number, y: number][] |
Window.background | string | CSSColor |
DOMMatrix.setMatrixValue | (transformList: string): DOMMatrix | (transformList: TransformString): DOMMatrix |
ImageData.data | Uint8ClampedArray<ArrayBufferLike> | any |
ImageData.colorSpace | "srgb" | ColorSpace |
SaveOptions.matte | string | undefined | CSSColor | undefined |
CanvasFilters.filter | string | (string & {}) | "none" | FilterFunction |
EngineDetails.api | "Vulkan" | "Metal" | "Vulkan" | "Metal" | null |
EngineDetails.error | string | undefined | string | null | undefined |
ExportOptions.matte | string | undefined | CSSColor | undefined |
RenderOptions.matte | string | undefined | CSSColor | undefined |
CanvasGradient.addColorStop | (offset: number, color: string): void | (offset: number, color: CSSColor): void |
CanvasDrawImage.drawCanvas | (image: Canvas, dx: number, dy: number): void | (image: Canvas, dx: number, dy: number, dw: number, dh: number): void | (image: Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void | (image: CanvasDrawable, dx: number, dy: number): void | (image: CanvasDrawable, dx: number, dy: number, dw: number, dh: number): void | (image: CanvasDrawable, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void |
ImageDataSettings.colorSpace | "srgb" | undefined | ColorSpace | undefined |
CanvasShadowStyles.shadowColor | string | CSSColor |
CreateTextureOptions.color | string | undefined | CSSColor | undefined |
CanvasFillStrokeStyles.fillStyle | string | CanvasPattern | CanvasGradient | CanvasTexture | CSSColor | CanvasPattern | CanvasGradient | CanvasTexture |
CanvasFillStrokeStyles.strokeStyle | string | CanvasPattern | CanvasGradient | CanvasTexture | CSSColor | CanvasPattern | CanvasGradient | CanvasTexture |
CanvasFillStrokeStyles.createPattern | (image: CanvasPatternSource, repetition: string | null): CanvasPattern | null | (image: CanvasPatternSource, repetition: "" | PatternRepeat | null): CanvasPattern | null |
CanvasTextDrawingStyles.fontStretch | CanvasFontStretch | (string & {}) | CanvasFontStretch |
ImageDataExportSettings.matte | string | undefined | CSSColor | undefined |
ImageDataExportSettings.colorSpace | "srgb" | undefined | ColorSpace | undefined |
CanvasRenderingContext2D.filter | string | (string & {}) | "none" | FilterFunction |
CanvasRenderingContext2D.fillStyle | string | CanvasPattern | CanvasGradient | CanvasTexture | CSSColor | CanvasPattern | CanvasGradient | CanvasTexture |
CanvasRenderingContext2D.drawCanvas | (image: Canvas, dx: number, dy: number): void | (image: Canvas, dx: number, dy: number, dw: number, dh: number): void | (image: Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void | (image: CanvasDrawable, dx: number, dy: number): void | (image: CanvasDrawable, dx: number, dy: number, dw: number, dh: number): void | (image: CanvasDrawable, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void |
CanvasRenderingContext2D.fontStretch | CanvasFontStretch | (string & {}) | CanvasFontStretch |
CanvasRenderingContext2D.outlineText | (text: string, maxWidth?: number | undefined): Path2D | (text: string, maxWidth?: number | undefined): Path2D | null |
CanvasRenderingContext2D.shadowColor | string | CSSColor |
CanvasRenderingContext2D.strokeStyle | string | CanvasPattern | CanvasGradient | CanvasTexture | CSSColor | CanvasPattern | CanvasGradient | CanvasTexture |
CanvasRenderingContext2D.createPattern | (image: CanvasPatternSource, repetition: string | null): CanvasPattern | null | (image: CanvasPatternSource, repetition: "" | PatternRepeat | null): CanvasPattern | null |
CanvasRenderingContext2D.textDecoration | string | TextDecorationSetting |
Newly deprecated
| export | @deprecated |
|---|---|
skia-canvas · App.eventLoop | Event loop modes have been removed: the node event loop is now always available |
Requirement changes (engines, peer dependencies)
None detected.
New exports (30)
| import | export | kind |
|---|---|---|
skia-canvas | CSSColor | type |
skia-canvas | PngFilters | type |
skia-canvas | loadCanvas | function |
skia-canvas | FontFeature | interface |
skia-canvas | FontInstance | interface |
skia-canvas | CanvasBackend | interface |
skia-canvas | ColorFunction | type |
skia-canvas | PatternRepeat | type |
skia-canvas | FilterFunction | type |
skia-canvas | ImageDataArray | type |
skia-canvas | PolarColorSpace | type |
skia-canvas | TransformString | type |
skia-canvas | ImageLoadOptions | type |
skia-canvas | CanvasFontKerning | type |
skia-canvas | CanvasLoadOptions | type |
skia-canvas | FontVariationAxis | interface |
skia-canvas | PointerEventProps | type |
skia-canvas | TransformFunction | type |
skia-canvas | FontVariantKeyword | type |
skia-canvas | CanvasTextRendering | type |
skia-canvas | ImageRequestOptions | type |
skia-canvas | FontVariantAlternate | type |
skia-canvas | CompositionEventProps | type |
skia-canvas | RectangularColorSpace | type |
skia-canvas | TextDecorationKeyword | type |
skia-canvas | TextDecorationSetting | type |
skia-canvas | HueInterpolationMethod | type |
skia-canvas | ColorInterpolationMethod | type |
skia-canvas | CoalescedPointerEventProps | type |
skia-canvas | CanvasRenderingContext2DSettings | interface |
Give your AI agent these facts
Vigia is a free MCP server: your coding agent checks versions, breaking changes and vulnerabilities before it writes code. No signup, no API key.
claude mcp add --transport http vigia https://vigia.coredls.cloud/mcp
Add to CursorAdd to VS Code★ Star on GitHub
Any other MCP client
{ "mcpServers": { "vigia": { "url": "https://vigia.coredls.cloud/mcp" } } }Agent skill (SKILL.md): tells the agent when to use Vigia · GitHub Action for pull requests
Frequently asked questions
What are the breaking changes when upgrading skia-canvas from 3 to 4?
Between skia-canvas 3.0.8 and 4.0.0, Vigia found 0 removed exports, 13 changed signatures and 46 removed or changed class or interface members.
What became deprecated in skia-canvas 4?
1 exports or members are newly marked as deprecated in skia-canvas 4.0.0.
For agents
GET https://vigia.coredls.cloud/v1/packages/npm/skia-canvas/upgrade?from=3.0.8&to=4.0.0