Skip to main content

​
Overview

Containers group display objects and control their position, visibility, and layer order. Graphics components let you draw shapes programmatically using the PixiJS graphics API.

​
Coordinate system

PixiJS uses a top-left origin — x=0, y=0 is the top-left corner of the canvas. The x axis increases to the right, and the y axis increases downward. The anchor prop on shape components shifts the pivot point of the object. anchor={0} (default) places the origin at the top-left of the object. anchor={0.5} centres it. anchor={1} places it at the bottom-right.

​
<Container>

A transparent display-object group. Nest other components inside it to control their collective position, scale, alpha, and z-order. <Container> accepts all props from PIXI.ContainerOptions. The most commonly used props are listed below.

​
Props

​
x
number
Horizontal position in pixels from the parent’s origin. Default 0.
​
y
number
Vertical position in pixels from the parent’s origin. Default 0.
​
width
number
Override the container’s width. Scales child content to fit.
​
height
number
Override the container’s height. Scales child content to fit.
​
scale
number | PointData
Uniform scale (number) or per-axis scale ({ x, y }). Default 1.
​
alpha
number
Opacity from 0 (invisible) to 1 (fully opaque). Default 1.
​
visible
boolean
When false, the container and all its children are hidden and excluded from rendering. Default true.
​
zIndex
number
Sort order within the parent container. Higher values render on top. Default 0.
​
rotation
number
Rotation in radians. Default 0.
​
pivot
number | PointData
The pivot point used for rotation and scaling, in local coordinates.
​
sortableChildren
boolean
When true, children are automatically sorted by zIndex before each render. Default false.
​
interactiveChildren
boolean
When false, pointer events are disabled for all children. Default true.
​
cursor
Cursor
CSS cursor string shown when the pointer is over this container. Accepts standard CSS cursor values.
​
children
Snippet
required
Child components to render inside this container.

​
Example

<Container x={100} y={200} alpha={0.8} zIndex={2}>
  <Sprite key="background" />
  <Container x={50} y={50} scale={0.5}>
    <Sprite key="icon" />
  </Container>
</Container>

​
<Graphics>

Renders arbitrary shapes using a draw callback. The callback receives a PIXI.Graphics instance and is re-run reactively whenever the draw prop changes.

​
Props

​
draw
(graphics: PIXI.Graphics) => void
required
A function called with the PIXI.Graphics object. Use the full PixiJS graphics API inside this function to draw shapes, lines, fills, and strokes. The graphics context is cleared before each call.
​
isMask
boolean
When true, this graphics object is applied as a mask to the parent container. When false or omitted, the mask is removed. Default undefined.
​
x
number
Horizontal position. Default 0.
​
y
number
Vertical position. Default 0.
​
alpha
number
Opacity from 0 to 1. Default 1.
​
visible
boolean
Whether the graphic is rendered. Default true.
​
zIndex
number
Sort order within the parent. Default 0.
​
cursor
Cursor
CSS cursor string for pointer interaction.

​
Example

<script lang="ts">
  let progress = $state(0.75);
</script>

<!-- Redraws automatically when `progress` changes -->
<Graphics
  draw={(g) => {
    g.roundRect(0, 0, 400, 20, 10);
    g.fill({ color: 0x333333 });
    g.roundRect(0, 0, 400 * progress, 20, 10);
    g.fill({ color: 0x00cc66 });
  }}
/>

​
<Circle>

A convenience wrapper around <Graphics> that draws a filled circle with an optional border. Supports the anchor prop to control the pivot point.

​
Props

​
diameter
number
required
The diameter of the circle in pixels.
​
anchor
PixiPoint
Controls the pivot point. 0 = top-left, 0.5 = centre, 1 = bottom-right. Accepts a number (uniform) or { x, y }. Default undefined (top-left).
​
backgroundColor
PIXI.ColorSource
Fill colour. Accepts hex numbers (0xff0000), CSS colour strings ('#ff0000'), or RGB arrays. Default 0x000000.
​
backgroundAlpha
number
Fill opacity from 0 to 1. Default 1.
​
borderColor
PIXI.ColorSource
Stroke colour. Default 0x000000.
​
borderWidth
number
Stroke width in pixels. Default 0 (no border).
​
borderAlpha
number
Stroke opacity from 0 to 1. Default 1.
​
x
number
Horizontal position. Default 0.
​
y
number
Vertical position. Default 0.
​
alpha
number
Object opacity. Default 1.
​
visible
boolean
Whether the circle is rendered. Default true.
​
zIndex
number
Sort order within the parent. Default 0.
​
isMask
boolean
Apply this circle as a mask on the parent container.
​
cursor
Cursor
CSS cursor string.

​
Example

<Circle
  diameter={120}
  anchor={0.5}
  backgroundColor={0xff4444}
  borderColor={0xffffff}
  borderWidth={3}
  x={200}
  y={200}
/>

​
<Rectangle>

A convenience wrapper around <Graphics> that draws a filled rectangle with optional rounded corners and border. Supports the anchor prop.

​
Props

​
width
number
required
Width of the rectangle in pixels.
​
height
number
required
Height of the rectangle in pixels.
​
anchor
PixiPoint
Controls the pivot point. 0 = top-left, 0.5 = centre. Default undefined (top-left).
​
borderRadius
number
Corner radius for rounded rectangles. 0 = sharp corners. Default 0.
​
backgroundColor
PIXI.ColorSource
Fill colour. Default 0x000000.
​
backgroundAlpha
number
Fill opacity from 0 to 1. Default 1.
​
borderColor
PIXI.ColorSource
Stroke colour. Default 0x000000.
​
borderWidth
number
Stroke width in pixels. Default 0 (no border).
​
borderAlpha
number
Stroke opacity from 0 to 1. Default 1.
​
x
number
Horizontal position. Default 0.
​
y
number
Vertical position. Default 0.
​
alpha
number
Object opacity. Default 1.
​
visible
boolean
Whether the rectangle is rendered. Default true.
​
zIndex
number
Sort order within the parent. Default 0.
​
isMask
boolean
Apply this rectangle as a mask on the parent container.
​
cursor
Cursor
CSS cursor string.

​
Example

<!-- Rounded card background -->
<Rectangle
  width={320}
  height={180}
  anchor={0.5}
  borderRadius={16}
  backgroundColor={0x1a1a2e}
  backgroundAlpha={0.9}
  borderColor={0x4444ff}
  borderWidth={2}
  x={400}
  y={300}
/>

​
Using Graphics as a mask

Set isMask={true} on any <Graphics>, <Circle>, or <Rectangle> to clip the parent container to that shape. 
<Container>
  <!-- This circle clips everything else in the container -->
  <Circle diameter={200} anchor={0.5} isMask={true} x={100} y={100} />
  <Sprite key="photo" anchor={0.5} x={100} y={100} />
</Container>

Build docs developers (and LLMs) love

Get started for freeTalk to us