Skip to content
SveltePixi

Renderer

This is an alternative to using the Application component. It allows you to use a custom PIXI.Renderer instance but – like its native class – will not start the render loop or create the root container for you. You will need to do this yourself.

By default it will call PIXI.autoDetectRenderer to determine the instance. Like Application, this is an asynchronous operation and will call oninit when complete.

Usage

Basic

<script>
  import { Renderer, Container, Ticker, Text } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'


  let renderer
  let stage
</script>


<Renderer
  bind:instance={renderer}
  width={400}
  height={400}
  antialias
>
  <!-- use our own ticker to control the render loop -->
  <Ticker
    ontick={() => {
      renderer.render(stage)
    }}
  >
    <!--
      the root container is referred to as the "stage", child components
      can access it with getStage()
    -->
    <Container bind:instance={stage}>
      <DraggableCircle x={200} y={200} />
      <Text
        x={200}
        y={300}
        text="Click and drag"
        style={{ fill: 'white' }}
        anchor={0.5}
      />
    </Container>
  </Ticker>
</Renderer>

Custom View

If you want to customize the element that the canvas is rendered into, you can use the view slot. The canvas will be appended as a child of the slot element.

<script>
  import { Renderer, Container, Ticker, Text } from 'svelte-pixi'


  let renderer
  let stage
</script>


<Renderer
  bind:instance={renderer}
  width={400}
  height={400}
  antialias
  autoDensity
>
  {#snippet view(canvas)}
    <div class="custom">
      <!-- canvas will be placed here -->
    </div>
  {/snippet}


  <!-- pixi components go here -->
  <Container bind:instance={stage}>
    <Ticker
      ontick={() => {
        renderer.render(stage)
      }}
    />
    <Text
      x={200}
      y={200}
      anchor={0.5}
      text="Hello World"
      style={{ fill: 'white' }}
    />
  </Container>
</Renderer>


<style>
  .custom :global(canvas) {
    border: 5px solid tomato;
    border-radius: 5px;
  }
</style>

Render on Demand

The Application component supports rendering on demand. While Renderer doesn’t offer the same render="demand" prop, you can still implement this manually:

<script>
  import { Renderer, Container, Ticker, Text } from 'svelte-pixi'
  import DraggableCircle from '$lib/components/DraggableCircle.svelte'


  let renderer
  let stage
  let needsRender = true
</script>


<Renderer
  bind:instance={renderer}
  width={400}
  height={400}
  antialias
  oninvalidate={() => {
    needsRender = true
  }}
>
  <Ticker
    ontick={() => {
      if (needsRender) {
        renderer.render(stage)
        needsRender = false
        // check out the console
        console.log('render')
      }
    }}
  >
    <Container bind:instance={stage}>
      <DraggableCircle x={200} y={200} />
      <Text
        x={200}
        y={300}
        text="Click and drag"
        style={{ fill: 'white' }}
        anchor={0.5}
      />
    </Container>
  </Ticker>
</Renderer>

See Render on Demand for more information.

API

Props

* denotes required

NameDescription
antialias
boolean

Whether to enable anti-aliasing. This may affect performance.

autoDensity
boolean

Resizes renderer view in CSS pixels to allow for resolutions other than 1.

background
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

Alias for backgroundColor

backgroundAlpha
number

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).

backgroundColor
stringnumbernumber[]Float32ArrayUint8ArrayUint8ClampedArrayPIXI.HslColorPIXI.HslaColorPIXI.HsvColorPIXI.HsvaColorPIXI.RgbColorPIXI.RgbaColorPIXI.Color

The background color used to clear the canvas. See {@link ColorSource} for accepted color values.

bezierSmoothness
number

A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)

canvas
PIXI.ICanvas

The canvas to use as a view, optional.

clearBeforeRender
boolean

Whether to clear the canvas before new render passes.

context
nullWebGL2RenderingContext

User-provided WebGL rendering context object.

depth
boolean

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

eventFeatures
Partial<PIXI.EventSystemFeatures>

The event features that are enabled by the EventSystem.

eventMode
"none""passive""auto""static""dynamic"

The default event mode for all display objects.

failIfMajorPerformanceCaveat
boolean
forceFallbackAdapter
boolean

Force the use of the fallback adapter

height
number

The height of the screen.

hello
boolean

Whether to log the version and type information of renderer to console.

instance
T

The PIXI.Renderer instance. Can be set or bound to. By default PIXI.autoDetectRenderer() is called and sets the instance when it resolves

manageImports
boolean
multiView
boolean

Whether to enable multi-view rendering. Set to true when rendering to multiple canvases on the dom.

oninit
(ev: { renderer: T; }) => void

Called when PIXI.autoDetectRenderer() resolves (only if no instance prop was set)

oninvalidate
() => void

Called whenever the renderer needs to be redrawn because of a change

onpostrender
(item: unknown) => void

Event handler for the postrender PIXI.Runner

onprerender
(item: unknown) => void

Event handler for the prerender PIXI.Runner

onrender
(item: unknown) => void

Event handler for the render PIXI.Runner

onrenderstart
(item: unknown) => void

Event handler for the renderStart PIXI.Runner

powerPreference
"low-power""high-performance"

An optional hint indicating what configuration of GPU is suitable for the WebGL context, can be 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance.

preference
"webgpu""webgl"

The preferred renderer type. WebGPU is recommended as its generally faster than WebGL.

preferWebGLVersion
12

The preferred WebGL version to use.

premultipliedAlpha
boolean

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

preserveDrawingBuffer
boolean

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

renderableGCActive
boolean

If set to true, this will enable the garbage collector on the GPU.

renderableGCFrequency
number

Frames between two garbage collections.

renderableGCMaxUnusedTime
number

The maximum idle frames before a texture is destroyed by garbage collection.

resolution
number

The resolution / device pixel ratio of the renderer.

roundPixels
boolean
skipExtensionImports
boolean

Whether 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,
});
textureGCActive
boolean

If set to true, this will enable the garbage collector on the GPU.

textureGCAMaxIdle
number
textureGCCheckCountMax
number

Frames between two garbage collections.

textureGCMaxIdle
number

The maximum idle frames before a texture is destroyed by garbage collection.

useBackBuffer
boolean

if true will use the back buffer where required

webgl
Partial<PIXI.WebGLOptions>

Optional WebGLOptions to pass only to the WebGL renderer

webgpu
Partial<PIXI.WebGPUOptions>

Optional WebGPUOptions to pass only to WebGPU renderer.

width
number

The width of the screen.

Snippets

NameType
childrenSnippet<[]>
loadingSnippet<[]>
viewSnippet<[]>