Skip to main content

Canvas

Create, transform, and display images and graphics within the HTML element.

Eg createImageBitmap

Functions

f
createImageBitmap

Create a new ImageBitmap object from a given source.

    Interfaces

    I
    v
    GPUCanvasContext

    The rendering context that presents WebGPU-rendered images on an OffscreenCanvas. Obtained from OffscreenCanvas.getContext with the "webgpu" context id.

    I
    v
    ImageBitmap

    ImageBitmap interface represents a bitmap image which can be drawn to a canvas.

    I
    v
    ImageBitmapRenderingContext

    A rendering context that displays the contents of an ImageBitmap on an OffscreenCanvas. Obtained from OffscreenCanvas.getContext with the "bitmaprenderer" context id.

    I
    ImageEncodeOptions
    No documentation available
    I
    v
    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.

    Type Aliases

    T
    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.

      T
      GPUCanvasAlphaMode
      No documentation available
        T
        GPUPresentMode
        No documentation available
          T
          ImageBitmapSource

          The ImageBitmapSource type represents an image data source that can be used to create an ImageBitmap.

            T
            ImageOrientation

            Specifies how the bitmap image should be oriented.

              T
              OffscreenRenderingContext
              No documentation available
                T
                OffscreenRenderingContextId
                No documentation available
                  T
                  PremultiplyAlpha

                  Specifies whether the bitmap's color channels should be premultiplied by the alpha channel.

                    T
                    ResizeQuality

                    Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.

                      function createImageBitmap

                      Overload 1

                      #createImageBitmap(
                      ): 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
                      optional

                      The options for creating the ImageBitmap.

                      Return Type #

                      Promise<ImageBitmap>

                      See #

                      Overload 2

                      #createImageBitmap(
                      sx: number,
                      sy: number,
                      sw: number,
                      sh: number,
                      ): 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
                      optional

                      The options for creating the ImageBitmap.

                      Return Type #

                      Promise<ImageBitmap>

                      See #

                      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
                      readonly

                      The canvas that this context is bound to.

                      Methods #

                      #configure(configuration: GPUCanvasConfiguration): undefined
                      #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

                      ImageBitmap interface represents a bitmap image which can be drawn to a canvas.

                      Properties #

                      #height: number
                      readonly

                      The height of the bitmap.

                      #width: number
                      readonly

                      The width of the bitmap.

                      Methods #

                      #close(): void

                      Releases imageBitmap's resources.

                      variable ImageBitmap

                      ImageBitmap represents a bitmap image which can be drawn to a canvas.

                      Properties #

                      interface ImageBitmapOptions

                      The options of createImageBitmap.

                      Properties #

                      #colorSpaceConversion: ColorSpaceConversion
                      optional

                      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
                      optional

                      Specifies how the bitmap image should be oriented.

                      #premultiplyAlpha: PremultiplyAlpha
                      optional

                      Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none, premultiply, or default (default).

                      #resizeHeight: number
                      optional

                      The output height.

                      #resizeQuality: ResizeQuality
                      optional

                      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
                      optional

                      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
                      readonly

                      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 OffscreenCanvas

                      extends EventTarget

                      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 #

                      #height: number

                      The height of the canvas.

                      #width: number

                      The width of the canvas.

                      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:
                      "2d"
                      | "webgl"
                      | "webgl2"
                      ,
                      options?: any,
                      ): null
                      #transferToImageBitmap(): ImageBitmap

                      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 GPUPresentMode

                      Definition #

                      "auto-vsync"
                      | "auto-no-vsync"
                      | "fifo"
                      | "fifo-relaxed"
                      | "immediate"
                      | "mailbox"

                      type alias ImageOrientation

                      Specifies how the bitmap image should be oriented.

                      Definition #

                      "flipY"
                      | "from-image"
                      | "none"

                      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"

                      Did you find what you needed?

                      Privacy policy