# Canvas | @coopenomics/sdk
Documentation for @coopenomics/sdk

# Class Canvas

Класс `Canvas` предоставляет инструмент для создания и управления HTML5 `<canvas>` с целью извлечения собственноручной подписи пользователя. Основное предназначение класса — упрощение работы с холстом для сбора подписи, её валидации и экспорта в формате base64.

#### Remarks

- Автоматически создаёт элемент `<canvas>` внутри указанного контейнера и подстраивает его размеры.
- Обеспечивает корректную работу с мышью и тач-устройствами для рисования подписи.
- Включает утилиты для очистки холста и извлечения подписи.
- Сохраняет содержимое при изменении размеров контейнера.
- Отключает прокрутку при касаниях через `touchAction: none`.

#### Example

Пример использования для извлечения подписи пайщика:

    import { Classes } from '@coopenomics/sdk'

    // Указываем контейнер, где будет размещён холст
    const container = document.getElementById('signature-container') as HTMLElement

    // Создаём экземпляр Canvas для работы с подписью
    const signatureCanvas = new Classes.Canvas(container, {
      lineWidth: 5,
      strokeStyle: '#000',
    })

    // Очистка холста при необходимости
    signatureCanvas.clearCanvas()

    // Извлечение подписи в формате base64
    const signature = signatureCanvas.getSignature()
    console.log('Подпись в формате base64:', signature)

    // Освобождение ресурсов, если холст больше не нужен
    signatureCanvas.destroy()

- Defined in components/sdk/src/classes/canvas/index.ts:40

#####
Index

### Constructors

constructor

### Properties

canvas
ctx

### Methods

clearCanvas
destroy
getSignature

## Constructors

### constructor

- new Canvas(container, opts?): Canvas

- Создаёт экземпляр класса `Canvas` и подготавливает холст для рисования подписи.

  #### Parameters

  - container: HTMLElement

    HTML-элемент, внутри которого создаётся `<canvas>`.

  - opts: {
    lineWidth?: number;
    strokeStyle?: string;
    } = {}

    Настройки:

    - `lineWidth` - Толщина линии для рисования (по умолчанию 5).
    - `strokeStyle` - Цвет линии для рисования (по умолчанию чёрный, `#000`).

    - ##### `Optional` lineWidth?: number

    - ##### `Optional` strokeStyle?: string

  #### Returns Canvas

  - Defined in components/sdk/src/classes/canvas/index.ts:56

## Properties

### canvas

canvas: HTMLCanvasElement

- Defined in components/sdk/src/classes/canvas/index.ts:41

### ctx

ctx: CanvasRenderingContext2D

- Defined in components/sdk/src/classes/canvas/index.ts:42

## Methods

### clearCanvas

- clearCanvas(): void

- Очищает холст.

  #### Returns void

  - Defined in components/sdk/src/classes/canvas/index.ts:93

### destroy

- destroy(): void

- Снимает все обработчики событий и очищает ресурсы.

  #### Returns void

  - Defined in components/sdk/src/classes/canvas/index.ts:109

### getSignature

- getSignature(): string

- Возвращает содержимое холста (подпись) в формате base64 (PNG).

  #### Returns string

  Подпись в формате base64.

  - Defined in components/sdk/src/classes/canvas/index.ts:102