Canvas
Create, transform, and display images and graphics within the HTML element.
function createImageBitmap
Overload 1
createImageBitmap(
image: ImageBitmapSource,
options?: ImageBitmapOptions,
): Promise<ImageBitmap>Create a new ImageBitmap object from a given source.
Examples
try {
// Fetch an image
const response = await fetch("https://example.com/image.png");
const blob = await response.blob();
// Basic usage
const basicBitmap = await createImageBitmap(blob);
console.log("Basic bitmap size:", basicBitmap.width, basicBitmap.height);
// With options
const resizedBitmap = await createImageBitmap(blob, {
resizeWidth: 100,
resizeHeight: 100,
resizeQuality: "high",
imageOrientation: "flipY"
});
// Cleanup when done
basicBitmap.close();
resizedBitmap.close();
} catch (error) {
console.error("Failed to create ImageBitmap:", error);
}
Parameters
image: ImageBitmapSource The image to create an ImageBitmap from.
options: ImageBitmapOptions The options for creating the ImageBitmap.
Return Type
Promise<ImageBitmap> See
Overload 2
createImageBitmap(
image: ImageBitmapSource,
sx: number,
sy: number,
sw: number,
sh: number,
options?: ImageBitmapOptions,
): Promise<ImageBitmap>Create a new ImageBitmap object from a given source, cropping to the specified rectangle.
Examples
try {
// Fetch an image
const response = await fetch("https://example.com/image.png");
const blob = await response.blob();
// Cropping parameters
const croppedBitmap = await createImageBitmap(
blob,
0, // sx: start x
0, // sy: start y
50, // sw: source width
50, // sh: source height
);
// Cleanup when done
croppedBitmap.close();
} catch (error) {
console.error("Failed to create ImageBitmap:", error);
}
Parameters
image: ImageBitmapSource The image to create an ImageBitmap from.
sx: number The x coordinate of the top-left corner of the sub-rectangle from which the ImageBitmap will be cropped.
sy: number The y coordinate of the top-left corner of the sub-rectangle from which the ImageBitmap will be cropped.
sw: number The width of the sub-rectangle from which the ImageBitmap will be cropped.
sh: number The height of the sub-rectangle from which the ImageBitmap will be cropped.
options: ImageBitmapOptions The options for creating the ImageBitmap.
Return Type
Promise<ImageBitmap> See
interface GPUCanvasConfiguration
Properties
usage: GPUTextureUsageFlags viewFormats: GPUTextureFormat[] colorSpace: "srgb" | "display-p3" alphaMode: GPUCanvasAlphaMode presentMode: GPUPresentMode interface GPUCanvasContext
The rendering context that presents WebGPU-rendered images on an OffscreenCanvas. Obtained from OffscreenCanvas.getContext with the "webgpu" context id.
Properties
canvas: OffscreenCanvas The canvas that this context is bound to.
Methods
configure(configuration: GPUCanvasConfiguration): undefined getConfiguration(): GPUCanvasConfiguration | null unconfigure(): undefined variable GPUCanvasContext
The constructor object for GPUCanvasContext.
A GPUCanvasContext is obtained from OffscreenCanvas.getContext with the "webgpu" context id rather than constructed directly.
Properties
interface ImageBitmap
variable ImageBitmap
ImageBitmap represents a bitmap image which can be drawn to a canvas.
Properties
interface ImageBitmapOptions
The options of createImageBitmap.
Properties
colorSpaceConversion: ColorSpaceConversion Specifies whether the image should be decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.
imageOrientation: ImageOrientation Specifies how the bitmap image should be oriented.
premultiplyAlpha: PremultiplyAlpha Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none, premultiply, or default (default).
resizeHeight: number The output height.
resizeQuality: ResizeQuality Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.
resizeWidth: number The output width.
interface ImageBitmapRenderingContext
A rendering context that displays the contents of an ImageBitmap on an OffscreenCanvas. Obtained from OffscreenCanvas.getContext with the "bitmaprenderer" context id.
Properties
canvas: OffscreenCanvas The canvas that this context is bound to.
Methods
transferFromImageBitmap(bitmap: ImageBitmap | null): undefined variable ImageBitmapRenderingContext
The constructor object for ImageBitmapRenderingContext.
An ImageBitmapRenderingContext is obtained from OffscreenCanvas.getContext with the "bitmaprenderer" context id rather than constructed directly.
Properties
interface ImageEncodeOptions
interface OffscreenCanvas
A canvas that can be rendered to off the main thread and without being attached to the DOM. It exposes drawing contexts via OffscreenCanvas.getContext and can produce a Blob or ImageBitmap from its contents.
Properties
Methods
convertToBlob(options?: ImageEncodeOptions): Promise<Blob> Create a Blob object representing the image contained in the canvas.
getContext(
contextId: "bitmaprenderer",
options?: any,
): ImageBitmapRenderingContext | null Get a drawing context for the canvas. If this was previously called, it will return the same context.
getContext(
contextId: "webgpu",
options?: any,
): GPUCanvasContext | null getContext(
contextId: OffscreenRenderingContextId,
options?: any,
): OffscreenRenderingContext | null getContext(
contextId:
"2d"
| "webgl"
| "webgl2"
,
options?: any,
): null Create an ImageBitmap object representing the image contained in the canvas.
See
variable OffscreenCanvas
The constructor object for OffscreenCanvas, used to create a new offscreen canvas with the given width and height that can be rendered to without being attached to the DOM.
Properties
See
type alias ColorSpaceConversion
Specifies whether the image should be decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.
Definition
"default" | "none" type alias GPUCanvasAlphaMode
Definition
"opaque" | "premultiplied" type alias GPUPresentMode
Definition
"auto-vsync"
| "auto-no-vsync"
| "fifo"
| "fifo-relaxed"
| "immediate"
| "mailbox"
type alias ImageBitmapSource
The ImageBitmapSource type represents an image data source that can be used to create an ImageBitmap.
Definition
type alias ImageOrientation
Specifies how the bitmap image should be oriented.
Definition
"flipY"
| "from-image"
| "none"
type alias OffscreenRenderingContext
Definition
type alias OffscreenRenderingContextId
Definition
"bitmaprenderer" | "webgpu" type alias PremultiplyAlpha
Specifies whether the bitmap's color channels should be premultiplied by the alpha channel.
Definition
"default"
| "none"
| "premultiply"
type alias ResizeQuality
Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.
Definition
"high"
| "low"
| "medium"
| "pixelated"
© 2018–2025 the Deno authors
Licensed under the MIT License.
https://docs.deno.com/api/web/canvas
