Container & Graphics

Layout containers and procedural drawing components

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>