Advanced
Optional
antialiasWhether to enable anti-aliasing. This may affect performance.
Optional
autoResizes renderer view in CSS pixels to allow for resolutions other than 1.
This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.
Optional
backgroundAlias for backgroundColor
Optional
backgroundTransparency of the background color, value from 0
(fully transparent) to 1
(fully opaque).
This value determines whether the canvas is initialized with alpha transparency support.
Note: This cannot be changed after initialization. If set to 1
, the canvas will remain opaque,
even if a transparent background color is set later.
The background color used to clear the canvas. See ColorSource for accepted color values.
A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)
Optional
canvasThe canvas to use as a view, optional.
Optional
clearWhether to clear the canvas before new render passes.
Optional
depthWhether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.
Optional
eventConfiguration for enabling/disabling specific event features. Use this to optimize performance by turning off unused functionality.
Optional
eventThe type of interaction behavior for a Container. This is set via the Container#eventMode property.
// Basic event mode setup
const sprite = new Sprite(texture);
sprite.eventMode = 'static'; // Enable standard interaction
sprite.on('pointerdown', () => { console.log('clicked!'); });
// Different event modes
sprite.eventMode = 'none'; // Disable all interaction
sprite.eventMode = 'passive'; // Only allow interaction on children
sprite.eventMode = 'auto'; // Like DOM pointer-events: auto
sprite.eventMode = 'dynamic'; // For moving/animated objects
Available modes:
'none'
: Ignores all interaction events, even on its children'passive'
: (default) Does not emit events and ignores hit testing on itself and
non-interactive children. Interactive children will still emit events.'auto'
: Does not emit events but is hit tested if parent is interactive.
Same as interactive = false
in v7'static'
: Emit events and is hit tested. Same as interactive = true
in v7'dynamic'
: Emits events and is hit tested but will also receive mock interaction events fired from
a ticker to allow for interaction when the mouse isn't movingPerformance tips:
'none'
for pure visual elements'passive'
for containers with some interactive children'static'
for standard buttons/controls'dynamic'
only for moving/animated interactive elementsOptional
failOptional
heightThe height of the screen.
Whether to log the version and type information of renderer to console.
Optional
manageIf set to true, this will enable the garbage collector on the GPU.
Frames between two garbage collections.
The maximum idle frames before a texture is destroyed by garbage collection.
Optional
resolutionThe resolution / device pixel ratio of the renderer.
Optional
roundOptional
skipWhether to stop PixiJS from dynamically importing default extensions for the renderer. It is false by default, and means PixiJS will load all the default extensions, based on the environment e.g browser/webworker. If you set this to true, then you will need to manually import the systems and extensions you need.
e.g.
import 'accessibility';
import 'app';
import 'events';
import 'spritesheet';
import 'graphics';
import 'mesh';
import 'text';
import 'text-bitmap';
import 'text-html';
import { autoDetectRenderer } from 'pixi.js';
const renderer = await autoDetectRenderer({
width: 800,
height: 600,
skipExtensionImports: true,
});
If set to true, this will enable the garbage collector on the GPU.
Frames between two garbage collections.
The maximum idle frames before a texture is destroyed by garbage collection.
Optional
viewAlias for canvas
.
Optional
widthThe width of the screen.
Options for the shared systems of a renderer.