Namespace: environment

environment

PixiJS supports multiple environments including browsers, Web Workers, and Node.js. The environment is auto-detected by default using the environment.autoDetectEnvironment function.

The Adapter interface provides a way to abstract away the differences between these environments. PixiJS uses the BrowserAdapter by default.

However you can manually set the environment using the DOMAdapter singleton, for example to use Pixi within a WebWorker.

import { DOMAdapter, WebWorkerAdapter } from 'pixi.js';

// WebWorkerAdapter is an implementation of the Adapter interface
DOMAdapter.set(WebWorkerAdapter);

// use the adapter to create a canvas (in this case an OffscreenCanvas)
DOMAdapter.get().createCanvas(800, 600);

Interface Definitions

Adapter

This interface describes all the DOM dependent calls that Pixi makes throughout its codebase. Implementations of this interface can be used to make sure Pixi will work in any environment, such as browser, Web Workers, and Node.js.

Properties:

Name	Type	Description
`createCanvas`	(width: number, height: number) => ICanvas	Returns a canvas object that can be used to create a webgl context.
`fetch`	(url: RequestInfo, options: RequestInit) => Promise<Response>	Returns a Response object that has been fetched from the given URL.
`getBaseUrl`	() => string	Returns the current base URL For browser environments this is either the document.baseURI or window.location.href
`getCanvasRenderingContext2D`	() => { prototype : ICanvasRenderingContext2D }	Returns a 2D rendering context.
`getFontFaceSet`	() => FontFaceSet \| null	Return the font face set if available
`getNavigator`	() => { userAgent : string, gpu : GPU \| null }	Returns a partial implementation of the browsers window.navigator
`getWebGLRenderingContext`	() => typeof WebGLRenderingContext	Returns a WebGL rendering context.
`parseXML`	(xml: string) => Document	Returns Document object that has been parsed from the given XML string.

ICanvas

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

Properties:

Name	Type	Description
`height`	number	Height of the canvas.
`parentNode`	ICanvasParentNode \| null	Parent node of the canvas.
`style`	ICanvasStyle	Style of the canvas.
`width`	number	Width of the canvas.

ICanvasRenderingContext2D

Common interface for CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, and other custom canvas 2D context.

Properties:

Name	Type	Description
`letterSpacing`	string	sets the horizontal spacing behavior between text characters.
`textLetterSpacing`	string	sets the horizontal spacing behavior between text characters.

Members

BrowserAdapter readonly

This is an implementation of the Adapter interface. It can be used to make Pixi work in the browser.

Properties:

Name	Type	Description
`createCanvas`	Function	Creates a canvas element of the given size. This canvas is created using the browser's native canvas element.
`fetch`	Function	Returns a Response object that has been fetched from the given URL.
`getBaseUrl`	Function	Returns the current base URL for browser environments this is either the document.baseURI or window.location.href
`getCanvasRenderingContext2D`	Function	Returns a 2D rendering context.
`getFontFaceSet`	Function	Return the font face set if available
`getNavigator`	Function	Returns browsers window.navigator
`getWebGLRenderingContext`	Function	Returns a WebGL rendering context.
`parseXML`	Function	Returns Document object that has been parsed from the given XML string.

browserExt readonly

Extension for the browser environment.

DOMAdapter readonly

The DOMAdapter is a singleton that allows PixiJS to perform DOM operations, such as creating a canvas. This allows PixiJS to be used in any environment, such as a web browser, Web Worker, or Node.js. It uses the Adapter interface to abstract away the differences between these environments and uses the BrowserAdapter by default.

It has two methods: get():Adapter and set(adapter: Adapter).

Defaults to the BrowserAdapter.

Example

 import { DOMAdapter, WebWorkerAdapter } from 'pixi.js';

 // WebWorkerAdapter is an implementation of the Adapter interface
 DOMAdapter.set(WebWorkerAdapter);

 // use the adapter to create a canvas (in this case an OffscreenCanvas)
 DOMAdapter.get().createCanvas(800, 600);

WebWorkerAdapter readonly

This is an implementation of the Adapter interface. It can be used to make Pixi work in a Web Worker.

Properties:

Name	Type	Description
`createCanvas`	Function	Creates a canvas element of the given size using the browser's native OffscreenCanvas.
`fetch`	Function	Returns a Response object that has been fetched from the given URL.
`getBaseUrl`	Function	Returns the current base URL of the worker, which is globalThis.location.href
`getCanvasRenderingContext2D`	Function	Returns a 2D rendering context.
`getFontFaceSet`	Function	Return the font face set if available
`getNavigator`	Function	Returns browsers window.navigator
`getWebGLRenderingContext`	Function	Returns a WebGL rendering context.
`parseXML`	Function	Returns Document object that has been parsed from the given XML string.

webworkerExt readonly

Extension for the webworker environment.