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



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

## Methods [#methods]

### add() [#add]

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

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

Add a HTML layer to the canvas.

#### Parameters [#parameters]

##### 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]

`HTMLDivElement`

#### Default [#default]

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

#### Example [#example]

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

***

### get() [#get]

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

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

Get a HTML layer from the canvas.

#### Parameters [#parameters-1]

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

`string`

The id of the layer.

#### Returns [#returns-1]

`HTMLElement` | `undefined`

***

### remove() [#remove]

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

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

Remove a HTML layer from the canvas.

#### Parameters [#parameters-2]

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

`string`

The id of the layer to be removed.

#### Returns [#returns-2]

`void`