# Interface: CanvasManagerInterface (/pixi-vn/index/interfaces/CanvasManagerInterface)



Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:25](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L25)

## Properties [#properties]

### app [#app]

\> `readonly` **app**: `Application`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:30](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L30)

The PIXI Application instance.
It not recommended to use this property directly.

***

### children [#children]

\> `readonly` **children**: `ContainerChild`\[]

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:93](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L93)

The children of the canvas.

***

### ~~currentTickers~~ [#currenttickers]

\> `readonly` **currentTickers**: `Map`\<`string`, [`TickerInfo`](/pixi-vn/index/interfaces/TickerInfo)\<`any`>>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:217](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L217)

Currently tickers that are running.

#### Deprecated [#deprecated]

Use `tickers.currentTickers` from `@drincs/pixi-vn` instead.

***

### ~~currentTickersSteps~~ [#currenttickerssteps]

\> `readonly` **currentTickersSteps**: `Map`\<`string`, `Map`\<`string`, [`TickersSequence`](/pixi-vn/index/interfaces/TickersSequence)>>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:222](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L222)

The steps of the tickers

#### Deprecated [#deprecated-1]

Use `tickers.currentTickersSteps` from `@drincs/pixi-vn` instead.

***

### ~~gameLayer~~ [#gamelayer]

\> `readonly` **gameLayer**: `Container`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:35](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L35)

The PIXI Container that contains all the canvas elements.

#### Deprecated [#deprecated-2]

Use [layers](#layers).gameLayer instead.

***

### height [#height]

\> `readonly` **height**: `number`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:48](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L48)

The height of the canvas.

***

### htmlLayers [#htmllayers]

\> `readonly` **htmlLayers**: [`CanvasHtmlLayersInterface`](/pixi-vn/index/interfaces/CanvasHtmlLayersInterface)

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:509](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L509)

Namespace for operations on canvas HTML layers.

***

### isInitialized [#isinitialized]

\> `readonly` **isInitialized**: `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:39](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L39)

If the manager is initialized.

***

### layers [#layers]

\> `readonly` **layers**: [`CanvasLayersInterface`](/pixi-vn/index/interfaces/CanvasLayersInterface)

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:505](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L505)

Namespace for operations on canvas layers.

***

### screen [#screen]

\> `readonly` **screen**: `Rectangle`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:52](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L52)

The screen of the canvas (Application.screen).

***

### ~~tickers~~ [#tickers]

\> `readonly` **tickers**: [`CanvasTickersInterface`](/pixi-vn/index/interfaces/CanvasTickersInterface)

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:353](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L353)

Namespace for operations on canvas tickers.

#### Deprecated [#deprecated-3]

Use the top-level `tickers` module (`@drincs/pixi-vn`) instead.

***

### width [#width]

\> `readonly` **width**: `number`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:44](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L44)

The width of the canvas.

## Methods [#methods]

### add() [#add]

\> **add**(`alias`, `canvasComponent`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:136](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L136)

Add a canvas element to the canvas.
If there is a canvas element with the same alias, all "style", zIndex, and [TickerBase](/pixi-vn/index/classes/TickerBase) will be transferred to the new canvas element,
and the old canvas element will be removed.

#### Parameters [#parameters]

##### alias [#alias]

`string`

The alias to identify the component.

##### canvasComponent [#canvascomponent]

[`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The component to add.

##### options? [#options]

The options of the canvas element.

###### ignoreOldStyle? [#ignoreoldstyle]

`boolean`

If there is a canvas element with the same alias, the "style" of the old canvas element will be imported to the new canvas element.

**Default**

```ts
false
```

###### zIndex? [#zindex]

`number`

The zIndex of the canvas element.

**Default**

```ts
undefined
```

#### Returns [#returns]

`void`

#### Example [#example]

```ts
const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
const sprite = Sprite.from(texture);
canvas.add("bunny", sprite);
```

***

### ~~addHtmlLayer()~~ [#addhtmllayer]

\> **addHtmlLayer**(`id`, `element`, `style?`): `HTMLDivElement`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:485](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L485)

Add a HTML layer to the canvas.

#### Parameters [#parameters-1]

##### id [#id]

`string`

The id of the layer.

##### element [#element]

`HTMLElement`

The html element to be added.

##### style? [#style]

`Partial`\<`Pick`\<`CSSStyleDeclaration`, `"position"` | `"pointerEvents"` | `"userSelect"`>>

The style of the layer.

#### Returns [#returns-1]

`HTMLDivElement`

#### Default [#default]

```ts
{ position: "absolute", pointerEvents: "none", userSelect: "none" }.
```

#### Example [#example-1]

```tsx
const root = document.getElementById('root')
if (!root) {
    throw new Error('root element not found')
}
const htmlLayer = canvas.addHtmlLayer("ui", root, {
   position: "absolute",
   pointerEvents: "none"
})
const reactRoot = createRoot(htmlLayer)
reactRoot.render(
    <App />
)
```

#### Deprecated [#deprecated-4]

Use [htmlLayers](#htmllayers).add instead.

***

### ~~addLayer()~~ [#addlayer]

\> **addLayer**(`label`, `layer`): [`Layer`](/pixi-vn/index/type-aliases/Layer) | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:441](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L441)

Add a layer to the canvas.

#### Parameters [#parameters-2]

##### label [#label]

`string`

The label of the layer.

##### layer [#layer]

`Container`

The layer to be added.

#### Returns [#returns-2]

[`Layer`](/pixi-vn/index/type-aliases/Layer) | `undefined`

The layer.

#### Example [#example-2]

```ts
const uiLayer = new Container();
canvas.addLayer("ui", uiLayer);
```

#### Deprecated [#deprecated-5]

Use [layers](#layers).add instead.

***

### ~~addTicker()~~ [#addticker]

\> **addTicker**\<`TArgs`>(`canvasElementAlias`, `ticker`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:244](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L244)

Run a ticker. You can run multiple addTicker with the same alias and different tickerClasses.
If you run a ticker with the same alias and tickerClass, the old ticker will be removed.
If already exists a sequence of tickers with the same alias, it will be removed.

#### Type Parameters [#type-parameters]

##### TArgs [#targs]

`TArgs` *extends* [`TickerArgs`](/pixi-vn/index/interfaces/TickerArgs)

#### Parameters [#parameters-3]

##### canvasElementAlias [#canvaselementalias]

`string` | `string`\[]

The alias of the canvas element that will use the ticker.

##### ticker [#ticker]

[`Ticker`](/pixi-vn/index/interfaces/Ticker)\<`TArgs`>

The ticker class to be run.

#### Returns [#returns-3]

`string` | `undefined`

The id of the ticker that was added.

#### Example [#example-3]

```ts
canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))
```

#### Deprecated [#deprecated-6]

Use `tickers.add` from `@drincs/pixi-vn` instead.

***

### ~~addTickersSequence()~~ [#addtickerssequence]

\> **addTickersSequence**(`alias`, `steps`, `currentStepNumber?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:263](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L263)

Run a sequence of tickers.

#### Parameters [#parameters-4]

##### alias [#alias-1]

`string`

The alias of canvas element that will use the tickers.

##### steps [#steps]

[`Ticker`](/pixi-vn/index/interfaces/Ticker)\<`any`>\[]

The steps of the tickers.

##### currentStepNumber? [#currentstepnumber]

`number`

The current step number. It is used to continue the sequence of tickers.

#### Returns [#returns-4]

`string` | `undefined`

The id of tickers.

#### Example [#example-4]

```ts
canvas.addTickersSequence("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
])
```

#### Deprecated [#deprecated-7]

Use `tickers.addSequence` from `@drincs/pixi-vn` instead.

***

### animate() [#animate]

#### Call Signature [#call-signature]

\> **animate**\<`T`>(`components`, `keyframes`, `options?`, `priority?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:402](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L402)

Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function.
So Pixi’VN will save the animation state in saves.

##### Type Parameters [#type-parameters-1]

###### T [#t]

`T` *extends* [`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The type of Pixi’VN component(s) being animated.

##### Parameters [#parameters-5]

###### components [#components]

`string` | `T` | (`string` | `T`)\[]

The PixiJS component(s) to animate. This can be a single component, an array of components, or a string representing the component's alias.

###### keyframes [#keyframes]

`KeyframesType`\<`T`>

This is an object containing the properties to animate and the values to reach.

###### options? [#options-1]

`AnimationOptions`

[`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker.

###### priority? [#priority]

`UPDATE_PRIORITY`

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

##### Returns [#returns-5]

`string` | `undefined`

The function returns the ID of the ticker created to animate the component(s).

##### Default [#default-1]

```ts
UPDATE_PRIORITY.NORMAL
```

#### Call Signature [#call-signature-1]

\> **animate**\<`T`>(`components`, `sequence`, `options?`, `priority?`): `string` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:421](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L421)

Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
This function integrates with the PixiJS ticker to ensure smooth animations.

Pixi’VN will keep track of the animation state of this function.
So Pixi’VN will save the animation state in saves.

##### Type Parameters [#type-parameters-2]

###### T [#t-1]

`T` *extends* [`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

The type of Pixi’VN component(s) being animated.

##### Parameters [#parameters-6]

###### components [#components-1]

`string` | `T`

The PixiJS component(s) to animate. This can be a single component, an array of components, or a string representing the component's alias.

###### sequence [#sequence]

(`ObjectSegment`\<`T`> | `ObjectSegmentWithTransition`\<`T`>)\[]

The sequence of keyframes to animate the component(s) with.

###### options? [#options-2]

`SequenceOptions`

[`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker.

###### priority? [#priority-1]

`UPDATE_PRIORITY`

The priority of the PixiJS ticker. This parameter sets the ticker's priority.

##### Returns [#returns-6]

`string` | `undefined`

The function returns the ID of the ticker created to animate the component(s).

##### Default [#default-2]

```ts
UPDATE_PRIORITY.NORMAL
```

***

### canvasElementIsOnCanvas() [#canvaselementisoncanvas]

\> **canvasElementIsOnCanvas**\<`T`>(`pixiElement`): `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:188](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L188)

Check if a DisplayObject is on the canvas.

#### Type Parameters [#type-parameters-3]

##### T [#t-2]

`T` *extends* `Container`\<`ContainerChild`>

#### Parameters [#parameters-7]

##### pixiElement [#pixielement]

`T`

The DisplayObject to be checked.

#### Returns [#returns-7]

`boolean`

If the DisplayObject is on the canvas.

***

### clear() [#clear]

\> **clear**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:522](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L522)

Clear the canvas and the tickers.

#### Returns [#returns-8]

`void`

***

### ~~completeTickerOnStepEnd()~~ [#completetickeronstepend]

\> **completeTickerOnStepEnd**(`step`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:371](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L371)

Add a ticker that must be completed before the next step.
This method is used for example into a transition between scenes.

#### Parameters [#parameters-8]

##### step [#step]

The step that the ticker must be completed before the next step.

###### alias? [#alias-2]

`string`

If is a sequence of tickers, the alias of the sequence of tickers.

###### id [#id-1]

`string`

The id of the step.

#### Returns [#returns-9]

`void`

#### Deprecated [#deprecated-8]

Use `tickers.completeOnStepEnd` from `@drincs/pixi-vn` instead.

***

### copyCanvasElementProperty() [#copycanvaselementproperty]

\> **copyCanvasElementProperty**\<`T`>(`oldAlias`, `newAlias`, `options?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:101](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L101)

Copy the properties of an old canvas element to a new canvas element.

#### Type Parameters [#type-parameters-4]

##### T [#t-3]

`T` *extends* [`CanvasBaseItemMemory`](/pixi-vn/index/interfaces/CanvasBaseItemMemory)

#### Parameters [#parameters-9]

##### oldAlias [#oldalias]

`string` | `T` | [`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`T`>

Old alias

##### newAlias [#newalias]

`string` | [`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`T`>

New alias

##### options? [#options-3]

The options of the copy.

###### ignoreProperties? [#ignoreproperties]

(`defaultProperties`) => `string`\[]

If provided, the properties returned by this function will not be copied from the old canvas element to the new canvas element.

#### Returns [#returns-10]

`Promise`\<`void`>

***

### editAlias() [#editalias]

\> **editAlias**(`oldAlias`, `newAlias`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:199](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L199)

Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.

#### Parameters [#parameters-10]

##### oldAlias [#oldalias-1]

`string`

The old alias of the component to edit.

##### newAlias [#newalias-1]

`string`

The new alias of the component.

##### options? [#options-4]

The options of the canvas element.

###### ignoreTickers? [#ignoretickers]

`boolean`

If true, the tickers that are connected to the canvas element will not be transferred.

**Default**

```ts
false
```

#### Returns [#returns-11]

`void`

***

### export() [#export]

\> **export**(): [`CanvasGameState`](/pixi-vn/index/interfaces/CanvasGameState)

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:530](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L530)

Export the canvas and the tickers to an object.

#### Returns [#returns-12]

[`CanvasGameState`](/pixi-vn/index/interfaces/CanvasGameState)

The object.

***

### extractImage() [#extractimage]

\> **extractImage**(): `Promise`\<`string`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:517](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L517)

Extract the canvas as an image.

#### Returns [#returns-13]

`Promise`\<`string`>

The image as a base64 string.

***

### find() [#find]

\> **find**\<`T`>(`alias`): `T` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:182](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L182)

Get a canvas element by the alias.

#### Type Parameters [#type-parameters-5]

##### T [#t-4]

`T` *extends* [`CanvasBaseInterface`](/pixi-vn/index/interfaces/CanvasBaseInterface)\<`any`>

#### Parameters [#parameters-11]

##### alias [#alias-3]

`string`

The alias to identify the component.

#### Returns [#returns-14]

`T` | `undefined`

The canvas element. If the component does not exist, it will return `undefined`.

#### Example [#example-5]

```ts
const sprite = canvas.find<Sprite>("bunny");
```

***

### ~~findTicker()~~ [#findticker]

\> **findTicker**\<`TArgs`>(`tickerId`, `args?`): [`Ticker`](/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:230](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L230)

Find a ticker by its id.

#### Type Parameters [#type-parameters-6]

##### TArgs [#targs-1]

`TArgs` *extends* [`TickerArgs`](/pixi-vn/index/interfaces/TickerArgs)

#### Parameters [#parameters-12]

##### tickerId [#tickerid]

`string`

The id of the ticker to be found.

##### args? [#args]

`TArgs`

The args of the ticker.

#### Returns [#returns-15]

[`Ticker`](/pixi-vn/index/interfaces/Ticker)\<`TArgs`> | `undefined`

The ticker if found, undefined otherwise.

#### Deprecated [#deprecated-9]

Use `tickers.find` from `@drincs/pixi-vn` instead.

***

### ~~forceCompletionOfTicker()~~ [#forcecompletionofticker]

\> **forceCompletionOfTicker**(`id`, `alias?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:388](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L388)

This method force the completion of the tickers that are running.
This funcions is called in the next step.

#### Parameters [#parameters-13]

##### id [#id-2]

`string`

The id of the ticker. If the alias provided, the id is the id of the sequence of tickers.

##### alias? [#alias-4]

`string`

The alias of the sequence of tickers.

#### Returns [#returns-16]

`Promise`\<`void`>

#### Deprecated [#deprecated-10]

Use `tickers.forceCompletion` from `@drincs/pixi-vn` instead.

***

### ~~getHtmlLayer()~~ [#gethtmllayer]

\> **getHtmlLayer**(`id`): `HTMLElement` | `undefined`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:501](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L501)

Get a HTML layer from the canvas.

#### Parameters [#parameters-14]

##### id [#id-3]

`string`

The id of the layer.

#### Returns [#returns-17]

`HTMLElement` | `undefined`

#### Deprecated [#deprecated-11]

Use [htmlLayers](#htmllayers).get instead.

***

### ~~getLayer()~~ [#getlayer]

\> **getLayer**(`label`): [`Layer`](/pixi-vn/index/type-aliases/Layer) | `null`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:452](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L452)

Get a layer from the canvas.

#### Parameters [#parameters-15]

##### label [#label-1]

`string`

The label of the layer.

#### Returns [#returns-18]

[`Layer`](/pixi-vn/index/type-aliases/Layer) | `null`

The layer.

#### Example [#example-6]

```ts
const uiLayer = canvas.getLayer("ui");
```

#### Deprecated [#deprecated-12]

Use [layers](#layers).get instead.

***

### init() [#init]

\> **init**(`element`, `options`, `devtoolsOptions?`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:74](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L74)

Initialize the PixiJS Application and the interface div.
This method should be called before any other method.

#### Parameters [#parameters-16]

##### element [#element-1]

`HTMLElement`

The html element where I will put the canvas. Example: document.body

##### options [#options-5]

`Partial`\<[`ApplicationOptions`](/pixi-vn/index/interfaces/ApplicationOptions)> & `object`

The options of PixiJS Application

##### devtoolsOptions? [#devtoolsoptions]

`Devtools`

The options of the devtools. You can read more about it in the [PixiJS Devtools documentation](https://pixijs.io/devtools/docs/plugin/)

#### Returns [#returns-19]

`Promise`\<`void`>

#### Example [#example-7]

```ts
const body = document.body
if (!body) {
    throw new Error('body element not found')
}
await canvas.init(body, {
    width: 1920,
    height: 1080,
    backgroundColor: "#303030"
})
```

***

### ~~isTickerPaused()~~ [#istickerpaused]

\> **isTickerPaused**(`alias`, `tickerId?`): `boolean`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:348](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L348)

#### Parameters [#parameters-17]

##### alias [#alias-5]

`string`

The alias of the canvas element that will use the ticker.

##### tickerId? [#tickerid-1]

`string`

The ticker that will be checked.

#### Returns [#returns-20]

`boolean`

If the ticker is paused.

#### Deprecated [#deprecated-13]

Use `tickers.isPaused` from `@drincs/pixi-vn` instead.
Check if a ticker is paused.

***

### ~~onTickerComplete()~~ [#ontickercomplete]

\> **onTickerComplete**(`tickerId`, `options`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:539](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L539)

#### Parameters [#parameters-18]

##### tickerId [#tickerid-2]

`string`

##### options [#options-6]

###### aliasToRemoveAfter [#aliastoremoveafter]

`string`\[]

###### ignoreTickerSteps? [#ignoretickersteps]

`boolean`

###### stopTicker? [#stopticker]

`boolean`

###### tickerAliasToResume [#tickeraliastoresume]

`string`\[]

###### tickerIdToResume [#tickeridtoresume]

`string`\[]

#### Returns [#returns-21]

`void`

#### Deprecated [#deprecated-14]

Use `tickers.onComplete` from `@drincs/pixi-vn` instead.

***

### pause() [#pause]

\> **pause**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:359](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L359)

Pause the rendering of gameLayer and pause currently running tickers.
Use [resume](#resume) to restore rendering and resume only
the tickers paused by this method.

#### Returns [#returns-22]

`void`

***

### ~~pauseTicker()~~ [#pauseticker]

\> **pauseTicker**(`filters`): `string`\[]

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:300](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L300)

Pause a ticker. If a paused ticker have a time to be removed, it will be removed after the time.

#### Parameters [#parameters-19]

##### filters [#filters]

\{ `canvasAlias`: `string`; `tickerIdsExcluded?`: `string`\[]; } | \{ `id`: `string` | `string`\[]; }

The filters to pause the ticker.

###### Type Literal [#type-literal]

\{ `canvasAlias`: `string`; `tickerIdsExcluded?`: `string`\[]; }

The filters to pause the ticker.

###### canvasAlias [#canvasalias]

`string`

The alias of the canvas element that will use the ticker.
Will pause all tickers that are connected to this canvas element.

###### tickerIdsExcluded? [#tickeridsexcluded]

`string`\[]

Ticker ids excluded from the pause. If not provided, all tickers will be paused.

***

###### Type Literal [#type-literal-1]

\{ `id`: `string` | `string`\[]; }

The filters to pause the ticker.

###### id [#id-4]

`string` | `string`\[]

The id of the ticker to be paused. If provided, only this ticker will be paused.

#### Returns [#returns-23]

`string`\[]

The ids of the paused tickers.

#### Deprecated [#deprecated-15]

Use `tickers.pause` from `@drincs/pixi-vn` instead.

***

### remove() [#remove]

\> **remove**(`alias`, `options?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:163](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L163)

Remove a canvas element from the canvas.
And remove all tickers that are not connected to any canvas element.

#### Parameters [#parameters-20]

##### alias [#alias-6]

`string` | `string`\[]

The alias of the canvas element to be removed.

##### options? [#options-7]

The options of the canvas element.

###### ignoreTickers? [#ignoretickers-1]

`boolean`

If true, the tickers that are connected to the canvas element will not be removed.

**Default**

```ts
false
```

#### Returns [#returns-24]

`void`

#### Example [#example-8]

```ts
canvas.remove("bunny");
```

***

### removeAll() [#removeall]

\> **removeAll**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:192](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L192)

Remove all canvas elements from the canvas.

#### Returns [#returns-25]

`void`

***

### ~~removeAllTickers()~~ [#removealltickers]

\> **removeAllTickers**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:287](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L287)

Remove all tickers from the canvas.

#### Returns [#returns-26]

`void`

#### Deprecated [#deprecated-16]

Use `tickers.removeAll` from `@drincs/pixi-vn` instead.

***

### ~~removeHtmlLayer()~~ [#removehtmllayer]

\> **removeHtmlLayer**(`id`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:495](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L495)

Get a HTML layer from the canvas.

#### Parameters [#parameters-21]

##### id [#id-5]

`string`

The id of the layer to be removed.

#### Returns [#returns-27]

`void`

#### Deprecated [#deprecated-17]

Use [htmlLayers](#htmllayers).remove instead.

***

### ~~removeLayer()~~ [#removelayer]

\> **removeLayer**(`label`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:462](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L462)

Remove a layer from the canvas.

#### Parameters [#parameters-22]

##### label [#label-2]

`string`

The label of the layer to be removed.

#### Returns [#returns-28]

`void`

#### Example [#example-9]

```ts
canvas.removeLayer("ui");
```

#### Deprecated [#deprecated-18]

Use [layers](#layers).remove instead.

***

### ~~removeTicker()~~ [#removeticker]

\> **removeTicker**(`tickerId`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:293](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L293)

Remove a ticker by the id.

#### Parameters [#parameters-23]

##### tickerId [#tickerid-3]

`string` | `string`\[]

The id or an array of ids of the ticker to be removed.

#### Returns [#returns-29]

`void`

#### Deprecated [#deprecated-19]

Use `tickers.remove` from `@drincs/pixi-vn` instead.

***

### restore() [#restore]

\> **restore**(`data`): `Promise`\<`void`>

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:535](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L535)

Restore the canvas and the tickers from an object.

#### Parameters [#parameters-24]

##### data [#data]

`object`

The object.

#### Returns [#returns-30]

`Promise`\<`void`>

***

### resume() [#resume]

\> **resume**(): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:364](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L364)

Resume the rendering of gameLayer and resume tickers that were paused by
[pause](#pause).

#### Returns [#returns-31]

`void`

***

### ~~resumeTicker()~~ [#resumeticker]

\> **resumeTicker**(`filters`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:325](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L325)

Resume a ticker.

#### Parameters [#parameters-25]

##### filters [#filters-1]

\{ `canvasAlias`: `string`; } | \{ `id`: `string` | `string`\[]; }

The filters to resume the ticker.

###### Type Literal [#type-literal-2]

\{ `canvasAlias`: `string`; }

The filters to resume the ticker.

###### canvasAlias [#canvasalias-1]

`string`

The alias of the canvas element that will use the ticker.
Will resume all tickers that are connected to this canvas element.

***

###### Type Literal [#type-literal-3]

\{ `id`: `string` | `string`\[]; }

The filters to resume the ticker.

###### id [#id-6]

`string` | `string`\[]

The id of the ticker to be resumed. If provided, only this ticker will be resumed.

#### Returns [#returns-32]

`void`

#### Deprecated [#deprecated-20]

Use `tickers.resume` from `@drincs/pixi-vn` instead.

***

### ~~transferTickers()~~ [#transfertickers]

\> **transferTickers**(`oldAlias`, `newAlias`, `mode?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:121](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L121)

Transfer the tickers from an old alias to a new alias.

#### Parameters [#parameters-26]

##### oldAlias [#oldalias-2]

`string`

Old alias

##### newAlias [#newalias-2]

`string`

New alias

##### mode? [#mode]

`"move"` | `"duplicate"`

If "move", the old alias will be removed from the ticker. If "duplicate", the old alias will be kept in the ticker.

#### Returns [#returns-33]

`void`

#### Deprecated [#deprecated-21]

Use `tickers.transfer` from `@drincs/pixi-vn` instead.

***

### ~~unlinkComponentFromTicker()~~ [#unlinkcomponentfromticker]

\> **unlinkComponentFromTicker**(`alias`, `ticker?`): `void`

Defined in: [src/canvas/interfaces/CanvasManagerInterface.ts:279](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/interfaces/CanvasManagerInterface.ts#L279)

Remove a connection between a canvas element and a ticker.
And remove the ticker if there is no canvas element connected to it.

#### Parameters [#parameters-27]

##### alias [#alias-7]

`string` | `string`\[]

The alias of the canvas element that will use the ticker.

##### ticker? [#ticker-1]

`string` | (() => [`Ticker`](/pixi-vn/index/interfaces/Ticker)\<`any`>)

The ticker class to be removed.

#### Returns [#returns-34]

`void`

#### Example [#example-10]

```ts
canvas.unlinkComponentFromTicker("alien", RotateTicker)
```

#### Deprecated [#deprecated-22]

Use `tickers.unlinkComponent` from `@drincs/pixi-vn` instead.