# Function: canvasComponentDecorator() (/pixi-vn/index/functions/canvasComponentDecorator)



\> **canvasComponentDecorator**\<`M`, `T`>(`options?`): (`target`) => `void`

Defined in: [src/canvas/decorators/canvas-element-decorator.ts:51](https://github.com/DRincs-Productions/pixi-vn/blob/5bb5bb1f92e38998ea2f477b600168d8da3ece19/src/canvas/decorators/canvas-element-decorator.ts#L51)

Is a decorator that register a canvas component in the game.

## Type Parameters [#type-parameters]

### M [#m]

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

### T [#t]

`T` *extends* *typeof* [`CanvasBaseItem`](/pixi-vn/index/classes/CanvasBaseItem)

## Parameters [#parameters]

### options? [#options]

Options for the canvas component.

#### copyProperty? [#copyproperty]

(`component`, `memory`) => `void` | `Promise`\<`void`>

Function to copy the properties of the canvas component. This function is used when to copy the properties of the canvas component into another instance of the same canvas component.
This function is used into [canvas.copyCanvasElementProperty](/pixi-vn/index/interfaces/CanvasManagerInterface#copycanvaselementproperty) to copy the properties of the canvas component.

#### getInstance? [#getinstance]

(`canvasClass`, `memory`) => [`CanvasBaseItem`](/pixi-vn/index/classes/CanvasBaseItem)\<`M`> | `Promise`\<[`CanvasBaseItem`](/pixi-vn/index/classes/CanvasBaseItem)\<`M`>>

Function to get the instance of the canvas component. If not set, it will use the default constructor of the class.
This function is used into [canvas.restore](/pixi-vn/index/interfaces/CanvasManagerInterface#restore) to restore the canvas.

#### name? [#name]

`string`

The id used by Pixi’VN to refer to this class (must be unique). If you don't pass the id, the class name will be used as the id.

**Default**

```ts
target.name
```

## Returns [#returns]

(`target`) => `void`

## Example [#example]

```ts title="canvas/components/AlienTinting.ts"
const ALIEN_TINTING_TEST_ID = "AlienTintingTest";
@canvasComponentDecorator({
    name: ALIEN_TINTING_TEST_ID,
})
class AlienTintingTest extends Sprite<IAlienTintingMemory> {
    readonly pixivnId: string = CANVAS_SPINE_ID;
    override get memory() {
        // ...
    }
    override async setMemory(memory: IAlienTintingMemory) {
        // ...
    }
    // ...
}
```