Use Container component

Common example:

<Container />

Example with x and y:

<script>
import { signal } from 'canvasengine'

const x = signal(10)
const y = signal(10)

const click = () => {
    x.update(x => x + 10)
    y.update(y => y + 10)
}
</script>

<Container x y click />

Flex layout

display="flex" or any container layout property such as flexDirection, justifyContent, alignItems, gap, or padding makes the container manage its direct children through Yoga. Children already mounted are enrolled if the container becomes flex reactively. If its last layout property returns to undefined, Yoga is detached again and ordinary PixiJS positioning resumes.

<Container
  width={480}
  height={240}
  display="flex"
  flexDirection="row"
  justifyContent="space-evenly"
  alignItems="center"
  padding={[16, 24]}
  gap={12}
>
  <Rect width={80} height={80} color="#38bdf8" />
  <Rect width={80} height={120} color="#8b5cf6" />
</Container>

Two-value spacing arrays use [vertical, horizontal]; four-value arrays use [top, right, bottom, left]. Zero is a valid reactive value.

Use display="none" to remove an object from Yoga and hide its rendered subtree. Switching it back to flex restores it at its declared child order.

Parent-relative layout

CanvasEngine automatically creates a lightweight Yoga containing box when a child uses values that need its direct parent, such as percentage dimensions, right/bottom insets, margins, or flex-item properties. The parent does not need display="flex" for an absolute inset panel to use its numeric dimensions:

<Container width={720} height={220}>
  <Container
    positionType="absolute"
    top={22}
    right={28}
    bottom={22}
    left={34}
  />
</Container>

Only children that depend on this containing box are enrolled. Ordinary PixiJS siblings keep their x/y positioning. The automatic box is removed when its last dependent child is removed or stops using parent-relative values.

Full-screen centered GUI

Percentage dimensions follow the canvas and are recalculated after a renderer resize. A column flex container can center a complete GUI group on both axes:

<Canvas backgroundColor="#08111f">
  <Container
    width="100%"
    height="100%"
    display="flex"
    flexDirection="column"
    justifyContent="center"
    alignItems="center"
    gap={16}
  >
    <Loading size={40} />
    <Text text="Loading area..." color="white" size={18} />
  </Container>
</Canvas>

Numeric dimensions supplied by signals can start at zero and update after mount; nested flex containers will use the new dimensions for their next layout calculation.

Native PixiJS children

Use pixiChildren when you need to mount PixiJS objects directly inside a CanvasEngine container without wrapping every object in a CanvasEngine component.

<script>
import { Container } from 'pixi.js'

const world = new Container()
</script>

<Container pixiChildren={[world]} />

CanvasEngine adds these objects to the PixiJS scene graph when the container is mounted. It does not manage their internal state or lifecycle, so update and destroy them manually when needed:

<script>
import { Container as PixiContainer, Graphics } from 'pixi.js'

const world = new PixiContainer()
const brushPreview = new Graphics()

world.addChild(brushPreview)

function updatePreview(point) {
    brushPreview.clear()
    if (!point) return
    brushPreview
        .circle(point.x, point.y, 32)
        .stroke({ width: 2, color: 0xf0dfb9, alpha: 0.85 })
}

function destroyWorld() {
    world.destroy({ children: true })
}
</script>

<Container
    width={960}
    height={640}
    pixiChildren={[world]}
    on-before-destroy={destroyWorld}
/>

Common Properties

Property	Type	Description
x	number	X-coordinate position of the display object.
y	number	Y-coordinate position of the display object.
width	number	Width of the display object.
height	number	Height of the display object.
scale	object	Scale of the display object.
anchor	object	Anchor point of the display object.
skew	object	Skew of the display object.
tint	number	Tint color of the display object.
rotation	number	Rotation of the display object in radians.
angle	number	Rotation of the display object in degrees.
zIndex	number	Z-index of the display object.
roundPixels	boolean	Whether to round pixel values.
cursor	string	Cursor style when hovering over the display object.
visible	boolean	Visibility of the display object.
alpha	number	Alpha transparency of the display object.
pivot	object	Pivot point of the display object.
filters	array	Filters applied to the display object.
maskOf	Element	Element that this display object masks.
blendMode	string	Blend mode for rendering.
filterArea	object	Filter area for rendering.
outline	object	Outline effect following the object's alpha contour.
clip	object	Rectangular mask used to keep or hide part of the object.
occlusion	object	Low-alpha redraw of the covered part when this object passes behind obstacles.

Layout Properties

Pour obtenir la documentation complète et détaillée sur toutes les propriétés de mise en page, consultez la documentation officielle de PixiJS Layout.

Sizing and Dimensions

Property	Type	Description
width	number/string	Width of the display object. Accepts pixels or percentage (e.g. '50%').
height	number/string	Height of the display object. Accepts pixels or percentage (e.g. '50%').
minWidth	number/string	Minimum width the object can shrink to.
minHeight	number/string	Minimum height the object can shrink to.
maxWidth	number/string	Maximum width the object can expand to.
maxHeight	number/string	Maximum height the object can expand to.
aspectRatio	number	Ratio between width and height (e.g. 1.5 for 3:2 ratio).

Flex Layout

Property	Type	Description
flexDirection	string	Direction of flex items. Values: 'row', 'column', 'row-reverse', 'column-reverse'.
flexWrap	string	Whether items wrap. Values: 'wrap', 'nowrap', 'wrap-reverse'.
justifyContent	string	Main-axis alignment: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'.
alignItems	string	Cross-axis alignment: 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'.
alignContent	string	Multi-line alignment, including 'stretch', 'space-between', 'space-around', and 'space-evenly'.
alignSelf	string	Item override: 'auto', 'flex-start', 'flex-end', 'center', 'stretch', or 'baseline'.
flexGrow	number	Grow factor of item relative to other items.
flexShrink	number	Shrink factor of item relative to other items.
flexBasis	number/string	Initial size of item before flex growing/shrinking.
gap	number/string	Gap between rows and columns, in pixels or percent.
rowGap	number	Gap between rows.
columnGap	number	Gap between columns.

Positioning

Property	Type	Description
positionType	string	Type of positioning. Values: 'relative', 'absolute', 'static'.
top	number/string	Distance from the top edge.
right	number/string	Distance from the right edge.
bottom	number/string	Distance from the bottom edge.
left	number/string	Distance from the left edge.

Spacing, Margins and Borders

Property	Type	Description
margin	number/array	Space outside border box. Can be single value or array for different sides.
padding	number/array	Space inside border box. Can be single value or array for different sides.
border	number/array/object	Number/array: Yoga border width. Object on Graphics primitives: visual Pixi stroke.

Spacing arrays follow CSS shorthand ordering: [vertical, horizontal] or [top, right, bottom, left]. A visual Pixi border object is never included in Yoga sizing. display="none" removes the item from layout and hides its rendered subtree.

Object Fitting and Alignment

Property	Type	Description
objectFit	string	How object is resized to fit layout box. Values: 'contain', 'cover', 'fill', 'none', 'scale-down'.
objectPosition	string	Anchor point of object inside layout box. E.g. 'center', 'top left'.
transformOrigin	string	Pivot point for rotation and scaling of layout box.

Shadow

Property	Type	Description
blur	number	Blur strength.
color	number	Color of the shadow.
offset	object	Offset of the shadow.
quality	number	Quality of the shadow.

Hook before destroy

<script>
  import {
    signal,
    animatedSignal,
    effect,
    animatedSequence,
  } from "canvasengine";
  import MyViewport from "./viewport.ce";
  
  let bool = signal(true)
  const opacity = animatedSignal(1, { duration: 500 });

  const click = async () => {
    bool.set(!bool())
  }

  const beforeDestroy = async () => {
    await animatedSequence([
      () => opacity.set(0),
    ])
    console.log("before destroy")
  }
</script>


<Canvas antialias={true}>
     <Container onBeforeDestroy={beforeDestroy}>
        @if (bool) {
            <Rect width={300} height={300} color="red" alpha={opacity} click />
        }
    </Container>
</Canvas>