pixi.js
    Preparing search index...

    Interface ICanvasAdvanced

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

    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?: 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,
        ): ICanvasRenderingContext2D;
        getContext(
            contextId: "bitmaprenderer",
            options?: ImageBitmapRenderingContextSettings,
        ): ImageBitmapRenderingContext;
        getContext(
            contextId: "webgl" | "experimental-webgl",
            options?: WebGLContextAttributes,
        ): WebGLRenderingContext;
        getContext(
            contextId: "webgl2" | "experimental-webgl2",
            options?: WebGLContextAttributes,
        ): WebGL2RenderingContext;
        getContext(contextId: "webgpu"): GPUCanvasContext;
        getContext(
            contextId: ContextIds,
            options?: ContextSettings,
        ): RenderingContext;
        toBlob(
            callback: (blob: Blob) => void,
            type?: string,
            quality?: number,
        ): void;
        toDataURL(type?: string, quality?: number): string;
    }

    Hierarchy

    Index

    Properties

    addEventListener? height parentNode? removeEventListener? style? width

    Methods

    convertToBlob? dispatchEvent getBoundingClientRect? getContext toBlob? toDataURL?

    Properties

    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.

    The type of event to listen for.

    The callback to invoke when the event is fired.

    The options for adding event listener.

    height: number

    Height of the canvas.

    parentNode?: ICanvasParentNode

    Parent node of the canvas.

    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.

    The type of event to listen for.

    The callback to invoke when the event is fired.

    The options for removing event listener.

    style?: ICanvasStyle

    Style of the canvas.

    width: number

    Width of the canvas.

    Methods

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

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

    • Get the position and the size of the canvas.

      Returns ICanvasRect

      The smallest rectangle which contains the entire canvas.

    • Creates a Blob from the content of the canvas.

      Parameters

      • callback: (blob: 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

    • 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