pixi.js
    Preparing search index...

    Interface HTMLSourceCanvasExperimental Advanced

    An HTMLCanvasElement extended with the experimental HTML-in-Canvas proposal APIs.

    These members only exist in browsers that have the HTML-in-Canvas feature enabled, so they are optional. HTMLSource feature-detects requestPaint; the HTML-in-Canvas API must be enabled for the texture to upload.

    import type { HTMLSourceCanvas } from 'pixi.js/html-source';

    const canvas = app.canvas as HTMLSourceCanvas;

    // Feature-detect before relying on the experimental API.
    if (canvas.requestPaint)
    {
        canvas.requestPaint();
    }
    • HTMLSource For the texture source that drives these APIs
    • ElementImage For the snapshot type captureElementImage() returns
    interface HTMLSourceCanvas {
        captureElementImage?: (element: Element) => ElementImage;
        clearElementGeometry?: (element: HTMLSourceResource) => void;
        requestPaint?: () => void;
        updateElementGeometry?: (
            element: HTMLSourceResource,
            options?: {
                canvasClip?: DOMRectInit;
                canvasTransform?: DOMMatrixInit;
                preserveHitTestOrder?: boolean;
            },
        ) => void;
        getContext(
            contextId: "2d",
            options?: CanvasRenderingContext2DSettings,
        ): CanvasRenderingContext2D;
        getContext(
            contextId: "bitmaprenderer",
            options?: ImageBitmapRenderingContextSettings,
        ): ImageBitmapRenderingContext;
        getContext(
            contextId: "webgl",
            options?: WebGLContextAttributes,
        ): WebGLRenderingContext;
        getContext(
            contextId: "webgl2",
            options?: WebGLContextAttributes,
        ): WebGL2RenderingContext;
        getContext(contextId: string, options?: any): RenderingContext;
        getContext(contextId: "webgpu"): GPUCanvasContext;
    }

    Hierarchy

    Index
    captureElementImage? clearElementGeometry? requestPaint? updateElementGeometry?
    getContext
    captureElementImage?: (element: Element) => ElementImage

    Captures the current rendered pixels of element into an immutable ElementImage.

    clearElementGeometry?: (element: HTMLSourceResource) => void

    Chrome 155+. Clears the geometry set by HTMLSourceCanvas.updateElementGeometry.

    requestPaint?: () => void

    Requests a paint event so the canvas re-snapshots its drawable descendants.

    updateElementGeometry?: (
        element: HTMLSourceResource,
        options?: {
            canvasClip?: DOMRectInit;
            canvasTransform?: DOMMatrixInit;
            preserveHitTestOrder?: boolean;
        },
    ) => void

    Chrome 155+. Tells the browser where element was drawn so it can hit test the element and report its bounds to assistive technology. WebGL and WebGPU drawing never does this for you. canvasTransform maps the element's border box, before CSS transforms, to canvas CSS pixels. Older builds read the element's CSS transform instead.

    const canvas = app.canvas as HTMLSourceCanvas;
    const { a, b, c, d, tx, ty } = sprite.getGlobalTransform();
    const canvasTransform = new DOMMatrix([a, b, c, d, tx, ty]).translate(
        -sprite.anchor.x * sprite.texture.width,
        -sprite.anchor.y * sprite.texture.height,
    );

    canvas.updateElementGeometry?.(element, { canvasTransform });

    Settings
    Member Visibility

    On This Page
    Properties
    Methods