Graphics

Renders a PIXI.Graphics. Use the draw prop to interact with the Graphics API.

PIXI.Graphics description from PixiJS

source

The Graphics class is primarily used to render primitive shapes such as lines, circles and rectangles to the display, and to color and fill them. It can also be used to create complex masks and hit areas for interaction.

Type-Safety Limitation with Subclasses

Important: Using Subclasses

If you are extending PIXI.Graphics with your own subclass, you MUST provide the instance prop with your custom instance.

Due to TypeScript’s limitations with generic types, if you don’t provide an instance, a base PIXI.Graphics will be created and unsafely cast to your subclass type. This will cause runtime errors when trying to access subclass-specific properties or methods.

Correct Usage with Subclasses:

class MyGraphics extends PIXI.Graphics {
  myCustomMethod() { ... }
}

const graphics = new MyGraphics()
<Graphics instance={graphics} />

This limitation is documented in issue #49. When using the base PIXI.Graphics type (the default), this is not a concern.

Usage

Draw prop

The draw prop is a helper prop that gets called inside of an $effect(). This means it only draws when the function itself or any state inside of it changes.

Svelte 5

<script>
  import { Graphics, tick } from 'svelte-pixi'

  let size = tick(t => 100 + Math.sin(t.lastTime / 700) * 50)

  function draw(graphics) {
    graphics.clear()
    graphics
      .circle(0, 0, $size)
      .fill('darksalmon')
  }

</script>

<Graphics
  x={375}
  y={200}
  {draw}
/>

Svelte 4 (deprecated)

<script>
  import { Graphics, tick } from 'svelte-pixi/svelte-4'

  let size = tick(t => 100 + Math.sin(t.lastTime / 700) * 50)

  $: draw = (graphics) => {
    graphics.clear()
    graphics
      .circle(0, 0, $size)
      .fill('darksalmon')
  }

</script>

<Graphics
  x={375}
  y={200}
  draw={draw}
/>

API

Svelte 5

Props

* denotes required

Name	Description
accessible	boolean Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren	boolean Setting to false will prevent any children inside this container to be accessible. Defaults to true.
accessibleHint	nullstring Sets the aria-label attribute of the shadow div
accessiblePointerEvents	"visible""fill""stroke""auto""none""visiblePainted""visibleFill""visibleStroke""painted""all""inherit" Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	nullstring Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
accessibleType	"object""label""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""blockquote""body""br""button""canvas""caption""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""form""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""legend""li""link""main""map""mark""menu""meta""meter""nav""noscript""ol""optgroup""option""output""p""picture""pre""progress""q""rp""rt""ruby""s""samp""script""search""section""select""slot""small""source""span""strong""style""sub""summary""sup""table""tbody""td""template""textarea""tfoot""th""thead""time""title""tr""track""u""ul""var""video""wbr" Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
alpha	number
angle	number The angle of the object in degrees. [!NOTE] 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
blendMode	"none""inherit""normal""add""multiply""screen""darken""lighten""erase""color-dodge""color-burn""linear-burn""linear-dodge""linear-light""hard-light""soft-light""pin-light""difference""exclusion""overlay""saturation""color""luminosity""normal-npm""add-npm""screen-npm""subtract""divide""vivid-light""hard-mix""negation""min""max"
boundsArea	PIXI.Rectangle An optional bounds area for this container. Setting this rectangle will stop the renderer from recursively measuring the bounds of each children and instead use this single boundArea. [!IMPORTANT] This is great for optimisation! If for example you have a 1000 spinning particles and you know they all sit within a specific bounds, then setting it will mean the renderer will not need to measure the 1000 children to find the bounds. Instead it will just use the bounds you set.
cacheAsBitmap	boolean Legacy property for backwards compatibility with PixiJS v7 and below. Use cacheAsTexture instead.
cacheAsTexture	PIXI.CacheAsTextureOptionsboolean
cullable	boolean Controls whether this object should be culled when out of view. When true, the object will not be rendered if its bounds are outside the visible area.
cullableChildren	boolean Controls whether children of this container can be culled. When false, skips recursive culling checks for better performance.
cullArea	PIXI.Rectangle Custom shape used for culling calculations instead of object bounds. Defined in local space coordinates relative to the object. [!NOTE] Setting this to a custom Rectangle allows you to define a specific area for culling, which can improve performance by avoiding expensive bounds calculations.
cursor	"progress""auto""none""default""context-menu""help""pointer""wait""cell""crosshair""text""vertical-text""alias""copy""move""no-drop""not-allowed""e-resize""n-resize""ne-resize""nw-resize""s-resize""se-resize""sw-resize""w-resize""ns-resize""ew-resize""nesw-resize""col-resize""nwse-resize""row-resize""all-scroll""zoom-in""zoom-out""grab""grabbing"string & {} The cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL.
draw	(graphics: PIXI.Graphics) => any Call your drawing functions on the PIXI.Graphics instance here. It will only draw on mount and when the function or state inside of the function changes.
effects	PIXI.Effect[] todo Needs docs
eventMode	"auto""none""passive""static""dynamic" Enable interaction events for the Container. Touch, pointer and mouse events are supported.
filterArea	PIXI.Rectangle The area the filter is applied to. This is used as an optimization to define a specific region for filter effects instead of calculating the display object bounds each frame. [!NOTE] Setting this to a custom Rectangle allows you to define a specific area for filter effects, which can improve performance by avoiding expensive bounds calculations.
filters	readonly PIXI.Filter[] Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children. [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.
height	number The height of the Container, [!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio. [!NOTE] If you want to set both width and height at the same time, use {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
hitArea	nullPIXI.IHitArea Defines a custom hit area for pointer interaction testing. When set, this shape will be used for hit testing instead of the container's standard bounds.
instance	T The PIXI.Graphics instance. Can be set or bound to. WARNING: Type-safety limitation - If you are using a subclass of PIXI.Graphics, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.Graphics will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: class MyGraphics extends PIXI.Graphics { myMethod() { ... } } const graphics = new MyGraphics() <!-- Correct: always provide instance for subclasses --> <Graphics instance={graphics} />
interactive	boolean Whether this object should fire UI events. This is an alias for eventMode set to 'static' or 'passive'. Setting this to true will enable interaction events like pointerdown, click, etc. Setting it to false will disable all interaction events on this object.
interactiveChildren	boolean Controls whether children of this container can receive pointer events. Setting this to false allows PixiJS to skip hit testing on all children, improving performance for containers with many non-interactive children.
isRenderGroup	boolean
label	string The instance label of the object.
mask	numberPIXI.Container<PIXI.ContainerChild>Partial<PIXI.MaskOptionsAndMask>
name	string The instance name of the object.
onadded	() => void Called when the instance is added to its parent or stage
onclick	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the click event. Fired when a pointer device (mouse, touch, etc.) completes a click action.
oncreate	(instance: T) => void Called on creation of the component. You can use this to do any setup on the instance directly
onglobalmousemove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the globalmousemove event. Fired when the mouse moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.
onglobalpointermove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the globalpointermove event. Fired when the pointer moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.
onglobaltouchmove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the globaltouchmove event. Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object. The object must have eventMode set to 'static' or 'dynamic' to receive this event.
onmousedown	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mousedown event. Fired when a mouse button is pressed while the pointer is over the object.
onmouseenter	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseenter event. Fired when the mouse pointer enters the bounds of the object. Does not bubble.
onmouseleave	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseleave event. Fired when the pointer leaves the bounds of the display object. Does not bubble.
onmousemove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mousemove event. Fired when the pointer moves while over the display object.
onmouseout	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseout event. Fired when the pointer moves out of the bounds of the display object.
onmouseover	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseover event. Fired when the pointer moves onto the bounds of the display object.
onmouseup	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseup event. Fired when a mouse button is released over the display object.
onmouseupoutside	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the mouseupoutside event. Fired when a mouse button is released outside the display object that initially registered a mousedown.
onpointercancel	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointercancel event. Fired when a pointer device interaction is canceled or lost.
onpointerdown	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerdown event. Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.
onpointerenter	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerenter event. Fired when a pointer device enters the bounds of the display object. Does not bubble.
onpointerleave	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerleave event. Fired when a pointer device leaves the bounds of the display object. Does not bubble.
onpointermove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointermove event. Fired when a pointer device moves while over the display object.
onpointerout	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerout event. Fired when the pointer moves out of the bounds of the display object.
onpointerover	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerover event. Fired when the pointer moves over the bounds of the display object.
onpointertap	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointertap event. Fired when a pointer device completes a tap action (e.g., touch or mouse click).
onpointerup	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerup event. Fired when a pointer device button (mouse, touch, pen, etc.) is released.
onpointerupoutside	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the pointerupoutside event. Fired when a pointer device button is released outside the bounds of the display object that initially registered a pointerdown.
onremoved	() => void Called when the instance removed from its parent or stage
onrightclick	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the rightclick event. Fired when a right-click (context menu) action is performed on the object.
onrightdown	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the rightdown event. Fired when a right mouse button is pressed down over the display object.
onrightup	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the rightup event. Fired when a right mouse button is released over the display object.
onrightupoutside	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the rightupoutside event. Fired when a right mouse button is released outside the bounds of the display object that initially registered a rightdown.
ontap	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the tap event. Fired when a tap action (touch) is completed on the object.
ontouchcancel	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the touchcancel event. Fired when a touch interaction is canceled, such as when the touch is interrupted.
ontouchend	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the touchend event. Fired when a touch interaction ends, such as when the finger is lifted from the screen.
ontouchendoutside	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the touchendoutside event. Fired when a touch interaction ends outside the bounds of the display object that initially registered a touchstart.
ontouchmove	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the touchmove event. Fired when a touch interaction moves while over the display object.
ontouchstart	nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent> Property-based event handler for the touchstart event. Fired when a touch interaction starts, such as when a finger touches the screen.
pivot	number[number, number]{ x: number; y: number }PIXI.Point The center of rotation, scaling, and skewing for this display object in its local space. The position is the projection of pivot in the parent's local space. By default, the pivot is the origin (0, 0).
position	number[number, number]{ x: number; y: number }PIXI.Point The coordinate of the object relative to the local coordinates of the parent.
renderable	boolean Controls whether this object can be rendered. If false the object will not be drawn, but the transform will still be updated. This is different from visible, which skips transform updates.
rotation	number The rotation of the object in radians. [!NOTE] 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
scale	number[number, number]{ x: number; y: number }PIXI.Point The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
skew	number[number, number]{ x: number; y: number }PIXI.Point The skew factor for the object in radians. Skewing is a transformation that distorts the object by rotating it differently at each point, creating a non-uniform shape.
sortableChildren	boolean If set to true, the container will sort its children by zIndex value when the next render is called, or manually if sortChildren() is called. This actually changes the order of elements in the array of children, so it will affect the rendering order. [!NOTE] Also be aware of that this may not work nicely with the addChildAt() function, as the zIndex sorting may cause the child to automatically sorted to another position.
tabIndex	number Sets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.
tint	number
visible	boolean The visibility of the object. If false the object will not be drawn, and the transform will not be updated.
width	number The width of the Container, setting this will actually modify the scale to achieve the value set. [!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio. [!NOTE] If you want to set both width and height at the same time, use {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
x	number The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x
y	number The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y
zIndex	number The zIndex of the container. Controls the rendering order of children within their parent container. A higher value will mean it will be moved towards the front of the rendering order.

Snippets

Name	Type
children	Snippet<[instance: T]>

Svelte 4 (deprecated)

Props

Name	Description
blendMode 'normal'	PIXI.BLEND_MODES The blend mode to be applied to the graphic shape. Apply a value of 'normal' to reset the blend mode. Note that, since each primitive in the GraphicsGeometry list is rendered sequentially, modes such as PIXI.BLEND_MODES.ADD and PIXI.BLEND_MODES.MULTIPLY will be applied per-primitive.
draw	(graphics: Graphics) => any Call your drawing functions on the PIXI.Graphics instance here
instance	PIXI.Graphics The PIXI.Graphics instance. Can be set or bound to. WARNING: Type-safety limitation - If you are using a subclass of PIXI.Graphics, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.Graphics will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: class MyGraphics extends PIXI.Graphics { myMethod() { ... } } const graphics = new MyGraphics() <!-- Correct: always provide instance for subclasses --> <Graphics instance={graphics} />
tint 0xffffff	number The tint applied to each graphic shape. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	{}

Events

Name	Type	Detail
added	forwarded
click	forwarded
create	forwarded
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	forwarded
mousedown	forwarded
mousemove	forwarded
mouseout	forwarded
mouseover	forwarded
mouseup	forwarded
mouseupoutside	forwarded
pointercancel	forwarded
pointerdown	forwarded
pointermove	forwarded
pointerout	forwarded
pointerover	forwarded
pointertap	forwarded
pointerup	forwarded
pointerupoutside	forwarded
removed	forwarded
removedFrom	forwarded
rightclick	forwarded
rightdown	forwarded
rightup	forwarded
rightupoutside	forwarded
tap	forwarded
touchcancel	forwarded
touchend	forwarded
touchendoutside	forwarded
touchmove	forwarded
touchstart	forwarded