pixi.js
    Preparing search index...

    Interface HTMLSourceOptionsExperimental Advanced

    Options for creating an HTMLSource. Configures how the source binds to its owning canvas and when it repaints.

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

    // Minimal: a live element that auto-updates every time the browser repaints it.
    const source = new HTMLSource({ resource: domElement });

    // A continuously animated element you repaint yourself each frame.
    const animatedSource = new HTMLSource({
        resource: domElement,
        autoRequestPaint: false, // call source.requestPaint() in your own ticker instead
    });

    // A static one-shot capture that never listens for repaints.
    const staticSource = new HTMLSource({
        resource: domElement,
        autoUpdate: false,
    });

    HTMLSource For the texture source these options configure

    interface HTMLSourceOptions {
        autoLayout?: boolean;
        autoRequestPaint?: boolean;
        autoUpdate?: boolean;
        canvas?: HTMLSourceCanvas;
    }

    Hierarchy (View Summary)

    Index
    autoLayout? autoRequestPaint? autoUpdate? canvas?
    autoLayout?: boolean

    Automatically set content="drawable" on the owning canvas, plus the layoutsubtree attribute that Chrome versions before 155 expect. The browser only lays out and paints canvas descendants when it is present.

    true

    // Opt out when you set `<canvas content="drawable">` yourself in markup.
    const source = new HTMLSource({ resource: domElement, autoLayout: false });
    autoRequestPaint?: boolean

    Request an initial paint after construction. Set to false and call HTMLSource.requestPaint yourself each frame for continuous animations.

    true

    const source = new HTMLSource({ resource: domElement, autoRequestPaint: false });

    app.ticker.add(() => {
        source.requestPaint(); // drive repaints on your own schedule
    });
    autoUpdate?: boolean

    Listen for the owning canvas' paint event and update this source when the element is repainted. Disable for a static, captured-once texture.

    true

    // Capture once, never track DOM changes — cheaper for static content.
    const source = new HTMLSource({ resource: domElement, autoUpdate: false });
    canvas?: HTMLSourceCanvas

    The canvas that owns this element. It must be the resource's nearest <canvas> ancestor, or the constructor throws. Leave it out and it's inferred.

    // Inferred automatically — domElement is appended to the Pixi canvas.
    app.canvas.appendChild(domElement);
    const source = new HTMLSource({ resource: domElement });

    // Equivalent: the same canvas, passed explicitly.
    const explicit = new HTMLSource({
        resource: domElement,
        canvas: app.canvas as HTMLSourceCanvas,
    });

    Settings
    Member Visibility

    On This Page
    Properties