PixiCanvas

The PixiCanvas component is the primary way to create a PixiJS application in a pixi-solid application. It handles creating and managing the HTML canvas element, the Pixi.js Application instance, and provides context to child components for accessing the application and ticker.

Features

Automatically creates and manages a Pixi.Application instance
Wraps the canvas in a responsive container that automatically resizes
Provides context for ticker-based utilities (onTick, getTicker, etc.)
Accepts all standard PixiJS Application options as props
Can be used standalone or with PixiApplicationProvider for more control
Allows one PixiCanvas per Pixi.Application at a time; it can be unmounted and remounted

Usage

Simple Standalone Usage

The simplest way to use PixiCanvas is standalone. It will automatically create and manage the Pixi Application for you:

import { PixiCanvas, Sprite, Container } from "pixi-solid";
import { Texture } from "pixi.js";

export const App = () => (
  <PixiCanvas style={{ width: "100%", height: "100dvh" }} background="#1099bb">
    <Container>
      <Sprite texture={Texture.WHITE} x={100} y={100} scale={50} tint="#ff0000" />
    </Container>
  </PixiCanvas>
);

Props

PixiCanvas accepts Pixi application initialization options and a small set of wrapper props:

style — CSS styles for the wrapper div; accepts a CSS object or string.
class — CSS class for the wrapper.
classList — Reactive class map for the wrapper.
ref — Callback that receives the wrapper HTMLDivElement.

PixiJS Application Options

Application options initialize an app created by PixiCanvas. If it uses an app from a surrounding PixiApplicationProvider, these options are ignored and pixi-solid warns in development. Put initialization options on the app-owning provider.

Any valid Pixi.ApplicationOptions property except children and resizeTo (managed by pixi-solid):

background - Background color (hex or CSS color)
antialias - Enable antialiasing
resolution - Canvas resolution
width / height - Canvas dimensions (if not using CSS)
preserveDrawingBuffer - Preserve the drawing buffer
And many more...

See the PixiJS docs for the complete list of options.

Special Props

children - The pixi-solid components to render inside the canvas (required)

Examples

Responsive Canvas with Background

<PixiCanvas style={{ width: "100%", height: "100vh" }} background="#1099bb" antialias={true}>
  <MyContent />
</PixiCanvas>

Canvas with Custom Resolution

<PixiCanvas style={{ width: "800px", height: "600px" }} resolution={2}>
  <MyContent />
</PixiCanvas>

Other DOM attributes and event handlers belong on a caller-owned parent element; PixiCanvas does not forward them.

How It Works

Creates an internal wrapper <div> element with the provided class, style, and ref
Automatically creates a Pixi.Application instance with the provided options
Mounts the Pixi canvas into the internal wrapper div
Sets up automatic resizing based on the internal wrapper div's size (not just the window size)
Provides context to child components for accessing the application and ticker
Cleans up the application when the component unmounts

When to use it

For all basic Pixi.js applications in Pixi Solid
When you want the simplest possible setup
When you don't need to share the application with external HTML components

PixiApplicationProvider - When you need HTML components outside the canvas to access pixi-solid hooks
TickerProvider - For ticker functionality without a full application