Interface ICanvas

Common interface for HTMLCanvasElement, OffscreenCanvas, and other custom canvas classes.

Memberof

PIXI

interface ICanvas {
    addEventListener?: {
        (
            type: string,
            listener: EventListenerOrEventListenerObject,
            options?: boolean | AddEventListenerOptions,
        ): void;
        <K extends keyof WebGLContextEventMap>(
            type: K,
            listener: (this: ICanvas, ev: WebGLContextEventMap[K]) => any,
            options?: boolean | AddEventListenerOptions,
        ): void;
    };
    height: number;
    parentNode?: null
    | ICanvasParentNode;
    removeEventListener?: {
        (
            type: string,
            listener: EventListenerOrEventListenerObject,
            options?: boolean | EventListenerOptions,
        ): void;
        <K extends keyof WebGLContextEventMap>(
            type: K,
            listener: (this: ICanvas, ev: WebGLContextEventMap[K]) => any,
            options?: boolean | EventListenerOptions,
        ): void;
    };
    style?: ICanvasStyle;
    width: number;
    convertToBlob(options?: { quality?: number; type?: string }): Promise<Blob>;
    dispatchEvent(event: Event): boolean;
    getBoundingClientRect(): ICanvasRect;
    getContext(
        contextId: "2d",
        options?: ICanvasRenderingContext2DSettings,
    ): null | ICanvasRenderingContext2D;
    getContext(
        contextId: "bitmaprenderer",
        options?: ImageBitmapRenderingContextSettings,
    ): null | ImageBitmapRenderingContext;
    getContext(
        contextId: "webgl" | "experimental-webgl",
        options?: WebGLContextAttributes,
    ): null | WebGLRenderingContext;
    getContext(
        contextId: "webgl2" | "experimental-webgl2",
        options?: WebGLContextAttributes,
    ): null | WebGL2RenderingContext;
    getContext(
        contextId: ContextIds,
        options?: ContextSettings,
    ): null | RenderingContext;
    toBlob(
        callback: (blob: null | Blob) => void,
        type?: string,
        quality?: number,
    ): void;
    toDataURL(type?: string, quality?: number): string;
}

Hierarchy

  • ICanvas
  • Partial<EventTarget>
    • ICanvas

Properties

addEventListener? height parentNode? removeEventListener? style? width

Methods

convertToBlob? dispatchEvent getBoundingClientRect? getContext toBlob? toDataURL?

Properties

OptionaladdEventListener

addEventListener?: {
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
    <K extends keyof WebGLContextEventMap>(
        type: K,
        listener: (this: ICanvas, ev: WebGLContextEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
}

Adds the listener for the specified event.

Method

Param: type

The type of event to listen for.

Param: listener

The callback to invoke when the event is fired.

Param: options

The options for adding event listener.

Returns

height

height: number

Height of the canvas.

Optional ReadonlyparentNode

parentNode?: null | ICanvasParentNode

Parent node of the canvas.

OptionalremoveEventListener

removeEventListener?: {
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
    <K extends keyof WebGLContextEventMap>(
        type: K,
        listener: (this: ICanvas, ev: WebGLContextEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
}

Removes the listener for the specified event.

Method

Param: type

The type of event to listen for.

Param: listener

The callback to invoke when the event is fired.

Param: options

The options for removing event listener.

Returns

Optional Readonlystyle

style?: ICanvasStyle

Style of the canvas.

width

width: number

Width of the canvas.

Methods

OptionalconvertToBlob

  • convertToBlob(options?: { quality?: number; type?: string }): Promise<Blob>

  • Get the content of the canvas as Blob.

    Parameters

    • Optionaloptions: { quality?: number; type?: string }

      The options for creating Blob.

      • Optionalquality?: number

        A number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

      • Optionaltype?: string

        A string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported.

    Returns Promise<Blob>

    A Promise returning a Blob object representing the image contained in the canvas.

dispatchEvent

  • dispatchEvent(event: Event): boolean

  • Dispatches a event.

    Parameters

    • event: Event

      The Event object to dispatch. Its Event.target property will be set to the current EventTarget.

    Returns boolean

    Returns false if event is cancelable, and at least one of the event handlers which received event called Event.preventDefault(). Otherwise true.

OptionalgetBoundingClientRect

  • getBoundingClientRect(): ICanvasRect

  • Get the position and the size of the canvas.

    Returns ICanvasRect

    The smallest rectangle which contains the entire canvas.

getContext

  • getContext(
        contextId: "2d",
        options?: ICanvasRenderingContext2DSettings,
    ): null | ICanvasRenderingContext2D

  • Get rendering context of the canvas.

    Parameters

    Returns null | ICanvasRenderingContext2D

    The created context, or null if contextId is not supported.

  • getContext(
        contextId: "bitmaprenderer",
        options?: ImageBitmapRenderingContextSettings,
    ): null | ImageBitmapRenderingContext

  • Parameters

    • contextId: "bitmaprenderer"
    • Optionaloptions: ImageBitmapRenderingContextSettings

    Returns null | ImageBitmapRenderingContext

  • getContext(
        contextId: "webgl" | "experimental-webgl",
        options?: WebGLContextAttributes,
    ): null | WebGLRenderingContext

  • Parameters

    • contextId: "webgl" | "experimental-webgl"
    • Optionaloptions: WebGLContextAttributes

    Returns null | WebGLRenderingContext

  • getContext(
        contextId: "webgl2" | "experimental-webgl2",
        options?: WebGLContextAttributes,
    ): null | WebGL2RenderingContext

  • Parameters

    • contextId: "webgl2" | "experimental-webgl2"
    • Optionaloptions: WebGLContextAttributes

    Returns null | WebGL2RenderingContext

  • getContext(
        contextId: ContextIds,
        options?: ContextSettings,
    ): null | RenderingContext

  • Parameters

    Returns null | RenderingContext

OptionaltoBlob

  • toBlob(
        callback: (blob: null | Blob) => void,
        type?: string,
        quality?: number,
    ): void

  • Creates a Blob from the content of the canvas.

    Parameters

    • callback: (blob: null | Blob) => void

      A callback function with the resulting Blob object as a single argument. null may be passed if the image cannot be created for any reason.

    • Optionaltype: string

      A string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported.

    • Optionalquality: number

      A number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

    Returns void

OptionaltoDataURL

  • toDataURL(type?: string, quality?: number): string

  • Get the content of the canvas as data URL.

    Parameters

    • Optionaltype: string

      A string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported.

    • Optionalquality: number

      A number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

    Returns string

    A string containing the requested data URL.

Settings

Member Visibility

On This Page

Properties
Methods