skia-canvas을(를) 3.x에서 4.x로 업그레이드하기

skia-canvas 3.0.8과 4.0.0의 공개 API를 TypeScript 타입에서 자동으로 비교한 결과입니다. 시그니처 변경은 호환성이 깨질 가능성이 있다는 뜻이며 확정은 아닙니다.

요약

삭제된 import 경로	0
삭제된 export	0
변경된 시그니처	13
삭제된 클래스·인터페이스 멤버	2
변경된 클래스·인터페이스 멤버	44
새로 지원 중단됨	1
요구 사항 변경 (engines, peer 의존성)	0
새 export	30

삭제된 export

감지되지 않았습니다.

변경된 시그니처

export	이전	이후
`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"`

삭제된 클래스·인터페이스 멤버

member	import	이전
`Canvas.toSharpSync`	`skia-canvas`	`(options?: RenderOptions \| undefined): Sharp`
`Canvas.static contexts`	`skia-canvas`	`WeakMap<Canvas, readonly CanvasRenderingContext2D[]>`

변경된 클래스·인터페이스 멤버

member	이전	이후
`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`

새로 지원 중단됨

export	@deprecated
`skia-canvas · App.eventLoop`	Event loop modes have been removed: the node event loop is now always available

요구 사항 변경 (engines, peer 의존성)

감지되지 않았습니다.

새 export (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

이 데이터를 AI 에이전트에 제공하세요

Vigia는 무료 MCP 서버입니다. 코딩 에이전트가 코드를 작성하기 전에 버전, 호환성을 깨는 변경, 취약점을 확인합니다. 가입도 API 키도 필요 없습니다.

claude mcp add --transport http vigia https://vigia.coredls.cloud/mcp

Cursor에 추가 VS Code에 추가 ★ GitHub에서 스타 누르기

그 밖의 MCP 클라이언트

{ "mcpServers": { "vigia": { "url": "https://vigia.coredls.cloud/mcp" } } }

에이전트 스킬(SKILL.md): 에이전트에게 Vigia를 언제 쓸지 알려 줍니다 · 풀 리퀘스트용 GitHub Action

자주 묻는 질문

skia-canvas을(를) 3에서 4(으)로 업그레이드할 때 호환성이 깨지는 변경은 무엇인가요?

skia-canvas 3.0.8과 4.0.0 사이에서 Vigia는 삭제된 export 0개, 변경된 시그니처 13개, 삭제되거나 변경된 클래스·인터페이스 멤버 46개를 찾았습니다.

skia-canvas 4에서 지원 중단된 것은 무엇인가요?

skia-canvas 4.0.0에서 export 또는 멤버 1개가 새로 지원 중단으로 표시되었습니다.

에이전트용

GET https://vigia.coredls.cloud/v1/packages/npm/skia-canvas/upgrade?from=3.0.8&to=4.0.0