signature_pad

  • Version 5.1.1
  • Published
  • 434 kB
  • No dependencies
  • MIT license

Install

npm i signature_pad
yarn add signature_pad
pnpm add signature_pad

Overview

Library for drawing smooth signatures.

Index

Classes

class SignaturePad

class SignaturePad extends SignatureEventTarget {}

    constructor

    constructor(canvas: HTMLCanvasElement, options?: Options);

      property backgroundColor

      backgroundColor: string;

        property canvasContextOptions

        canvasContextOptions: CanvasRenderingContext2DSettings;

          property compositeOperation

          compositeOperation: GlobalCompositeOperation;

            property dotSize

            dotSize: number;

              property maxWidth

              maxWidth: number;

                property minDistance

                minDistance: number;

                  property minWidth

                  minWidth: number;

                    property penColor

                    penColor: string;

                      property throttle

                      throttle: number;

                        property velocityFilterWeight

                        velocityFilterWeight: number;

                          method clear

                          clear: () => void;

                            method fromData

                            fromData: (pointGroups: PointGroup[], { clear }?: FromDataOptions) => void;

                              method fromDataURL

                              fromDataURL: (dataUrl: string, options?: FromDataUrlOptions) => Promise<void>;

                                method isEmpty

                                isEmpty: () => boolean;

                                  method off

                                  off: () => void;

                                    method on

                                    on: () => void;

                                      method redraw

                                      redraw: () => void;

                                        method toData

                                        toData: () => PointGroup[];

                                          method toDataURL

                                          toDataURL: {
                                          (type: 'image/svg+xml', encoderOptions?: ToSVGOptions): string;
                                          (type?: string, encoderOptions?: number): string;
                                          };

                                            method toSVG

                                            toSVG: ({ includeBackgroundColor, includeDataUrl }?: ToSVGOptions) => string;

                                              Interfaces

                                              interface BasicPoint

                                              interface BasicPoint {}

                                                property pressure

                                                pressure: number;

                                                  property time

                                                  time: number;

                                                    property x

                                                    x: number;

                                                      property y

                                                      y: number;

                                                        interface FromDataOptions

                                                        interface FromDataOptions {}

                                                          property clear

                                                          clear?: boolean;

                                                            interface FromDataUrlOptions

                                                            interface FromDataUrlOptions {}

                                                              property height

                                                              height?: number;

                                                                property ratio

                                                                ratio?: number;

                                                                  property width

                                                                  width?: number;

                                                                    property xOffset

                                                                    xOffset?: number;

                                                                      property yOffset

                                                                      yOffset?: number;

                                                                        interface Options

                                                                        interface Options extends Partial<PointGroupOptions> {}

                                                                          property backgroundColor

                                                                          backgroundColor?: string;

                                                                            property canvasContextOptions

                                                                            canvasContextOptions?: CanvasRenderingContext2DSettings;

                                                                              property minDistance

                                                                              minDistance?: number;

                                                                                property throttle

                                                                                throttle?: number;

                                                                                  interface PointGroup

                                                                                  interface PointGroup extends PointGroupOptions {}

                                                                                    property points

                                                                                    points: BasicPoint[];

                                                                                      interface PointGroupOptions

                                                                                      interface PointGroupOptions {}

                                                                                        property compositeOperation

                                                                                        compositeOperation: GlobalCompositeOperation;
                                                                                        • This is the globalCompositeOperation for the line. *default: 'source-over'*

                                                                                          See Also

                                                                                          • https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

                                                                                        property dotSize

                                                                                        dotSize: number;

                                                                                          property maxWidth

                                                                                          maxWidth: number;

                                                                                            property minWidth

                                                                                            minWidth: number;

                                                                                              property penColor

                                                                                              penColor: string;

                                                                                                property velocityFilterWeight

                                                                                                velocityFilterWeight: number;

                                                                                                  interface SignatureEvent

                                                                                                  interface SignatureEvent {}

                                                                                                    property event

                                                                                                    event: MouseEvent | TouchEvent | PointerEvent;

                                                                                                      property pressure

                                                                                                      pressure: number;

                                                                                                        property type

                                                                                                        type: string;

                                                                                                          property x

                                                                                                          x: number;

                                                                                                            property y

                                                                                                            y: number;

                                                                                                              interface ToSVGOptions

                                                                                                              interface ToSVGOptions {}

                                                                                                                property includeBackgroundColor

                                                                                                                includeBackgroundColor?: boolean;

                                                                                                                  property includeDataUrl

                                                                                                                  includeDataUrl?: boolean;

                                                                                                                    Package Files (2)

                                                                                                                    Dependencies (0)

                                                                                                                    No dependencies.

                                                                                                                    Dev Dependencies (27)

                                                                                                                    Peer Dependencies (0)

                                                                                                                    No peer dependencies.

                                                                                                                    Badge

                                                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/signature_pad.

                                                                                                                    • Markdown
                                                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/signature_pad)
                                                                                                                    • HTML
                                                                                                                      <a href="https://www.jsdocs.io/package/signature_pad"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>