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

    Properties

    autoLayout? autoRequestPaint? autoUpdate? canvas?

    Properties

    autoLayout?: boolean

    Automatically set the layoutsubtree attribute on the owning canvas. The browser only lays out and paints canvas children when this attribute is present.

    true

    // Opt out when you set `<canvas layoutsubtree>` 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's layout subtree. When omitted, this is inferred from resource.parentElement when the resource is a direct canvas child.

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

    // Passed explicitly when inference is not possible.
    const explicit = new HTMLSource({
        resource: domElement,
        canvas: app.canvas as HTMLSourceCanvas,
    });

    Settings

    Member Visibility

    On This Page

    Properties