Image
A decoded bitmap that lives inside CanvasKit. Hand a PNG/JPEG byte buffer to CK.MakeImageFromEncoded (or upload a DOM source via surface.makeImageFromTextureSource) and you get back an Image you can draw with canvas.drawImage / drawImageRect, sample as a shader via image.makeShaderOptions, or feed into image filters.
Image is a WASM object. Decode once, reuse forever, .delete() when done. The doc-page bundle's loadImage(url) helper caches by URL on window so multiple demos share a single decoded image.
Error: Line 1: Unexpected identifier
drawImage(img, x, y, paint?) blits at native size. drawImageRect(img, src, dst, paint?) scales a sub-rect of the image into a destination rect — that's how sprite atlases work.
Sampling as a shader
Wrap an image as a shader to sample it per-pixel. Useful for procedural patterns, displacement, or anywhere you'd otherwise reach for drawImageRect repeatedly.
Error: Line 1: Unexpected identifier
TileMode.Repeat tiles the chess image across the rounded rect.
Common methods
| Member | Args | Returns | Notes |
|---|---|---|---|
delete | — | void | Free the WASM memory. |
encodeToBytes | fmt?: ImageFormat, quality?: number | Uint8Array | Encode to PNG/JPEG/WebP bytes. |
getColorSpace | — | ColorSpace | Color space the image was decoded into. |
getImageInfo | — | PartialImageInfo | Width, height, color type, alpha type. |
height | — | number | Image height in pixels. |
makeShaderCubic | tx, ty: TileMode, B, C: number, localMatrix?: Matrix | Shader | Cubic-resampled shader. Highest quality, slowest. |
makeShaderOptions | tx, ty: TileMode, fm: FilterMode, mm: MipmapMode, localMatrix?: Matrix | Shader | Sampled shader with explicit filter/mipmap controls. |
readPixels | x, y: number, info: ImageInfo, dst?: MallocObj, bytesPerRow?: number | Uint8Array | Float32Array | null | Read pixels back to JS. |
width | — | number | Image width in pixels. |
Static factories
(on CanvasKit)
| Factory | Args | Returns | Notes |
|---|---|---|---|
CK.MakeImageFromEncoded | bytes: Uint8Array | ArrayBuffer | Image | null | Decode PNG/JPEG/WebP. The most common entry point. |
CK.MakeImage | info: ImageInfo, pixels: Uint8Array, bytesPerRow: number | Image | null | Wrap a raw pixel buffer. |
CK.MakeAnimatedImageFromEncoded | bytes: Uint8Array | AnimatedImage | null | Decode an animated GIF/WebP/APNG. |
CK.MakeLazyImageFromTextureSource | src: TexImageSource, info?: ImageInfo, srcIsPremul?: boolean | Image | Defer GL upload until first draw. |
See also
Canvas.drawImage,drawImageRect,drawAtlas.Surface.makeImageSnapshot— surface → Image.Surface.makeImageFromTextureSource— DOM source → Image.Shader—image.makeShaderOptionsreturns one.ImageFilter.MakeImage— read an image as the bottom of a filter chain.