signature_pad

  • Version 5.0.7
  • Published
  • 423 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?: {
                              ratio?: number;
                              width?: number;
                              height?: number;
                              xOffset?: number;
                              yOffset?: number;
                              }
                              ) => Promise<void>;

                                method isEmpty

                                isEmpty: () => boolean;

                                  method off

                                  off: () => void;

                                    method on

                                    on: () => void;

                                      method toData

                                      toData: () => PointGroup[];

                                        method toDataURL

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

                                          method toSVG

                                          toSVG: ({ includeBackgroundColor }?: 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 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;

                                                                                                    Package Files (2)

                                                                                                    Dependencies (0)

                                                                                                    No dependencies.

                                                                                                    Dev Dependencies (28)

                                                                                                    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>