Class SignaturePad

Index

Interfaces

Classes

Constructor methods

Properties

Methods

Interfaces

SignaturePadOptions: constructor.SignaturePadOptions

optional public backgroundColor?: string

(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.

optional public dotSize?: Function

(float or function) Radius of a single dot.

optional public maxWidth?: number

(float) Maximum width of a line. Defaults to 2.5.

optional public minWidth?: number

(float) Minimum width of a line. Defaults to 0.5.

optional public onBegin?: Function

(function) Callback when stroke end.

optional public onEnd?: Function

(function) Callback when stroke begin.

optional public penColor?: string

(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".

optional public velocityFilterWeight?: number

(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

Classes

Bezier: constructor.Bezier

constructor(startPoint: constructor.Point, control1: constructor.Point, control2: constructor.Point, endPoint: constructor.Point): constructor.Bezier

Parameters

Returns

constructor.Bezier

public control1: constructor.CurveControl

public control2: constructor.CurveControl

public endPoint: constructor.Point

public startPoint: constructor.Point

public _point(t: number, start: number, c1: number, c2: number, end: number): number

Parameters

  • t: number
  • start: number
  • c1: number
  • c2: number
  • end: number

Returns

number

public length(): number

Returns

number

CurveControl: constructor.CurveControl

constructor(c1: constructor.Point, c2: constructor.Point): constructor.CurveControl

Parameters

Returns

constructor.CurveControl

public c1: constructor.Point

public c2: constructor.Point

Point: constructor.Point

constructor(x: number, y: number, time: number): constructor.Point

Parameters

  • x: number
  • y: number
  • time: number

Returns

constructor.Point

public time: number

public x: number

public y: number

public distanceTo(start: constructor.Point): number

Parameters

Returns

number

public velocityFrom(start: constructor.Point): number

Parameters

Returns

number

Constructor methods

constructor(canvas: Element, options?: constructor.SignaturePadOptions): SignaturePad

Parameters

Returns

SignaturePad

constructor.SignaturePadOptions: constructor.SignaturePadOptions

constructor.Bezier: constructor.Bezier

constructor.CurveControl: constructor.CurveControl

constructor.Point: constructor.Point

constructor(): constructor.Bezier

Returns

constructor.Bezier

.control1.control1: constructor.Point

.control2.control2: constructor.Point

.endPoint.endPoint: constructor.Point

.startPoint.startPoint: constructor.Point

constructor(): constructor.CurveControl

Returns

constructor.CurveControl

.c1.c1: constructor.Point

.c2.c2: constructor.Point

constructor(): constructor.Point

Returns

constructor.Point

.time.time: number

.x.x: number

.y.y: number

optional public constructor.backgroundColor.backgroundColor?: string

(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.

public constructor.c1.c1: constructor.Point

public constructor.c2.c2: constructor.Point

public constructor.control1.control1: constructor.CurveControl

public constructor.control2.control2: constructor.CurveControl

optional public constructor.dotSize.dotSize?: Function

(float or function) Radius of a single dot.

public constructor.endPoint.endPoint: constructor.Point

optional public constructor.maxWidth.maxWidth?: number

(float) Maximum width of a line. Defaults to 2.5.

optional public constructor.minWidth.minWidth?: number

(float) Minimum width of a line. Defaults to 0.5.

optional public constructor.onBegin.onBegin?: Function

(function) Callback when stroke end.

optional public constructor.onEnd.onEnd?: Function

(function) Callback when stroke begin.

optional public constructor.penColor.penColor?: string

(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".

public constructor.startPoint.startPoint: constructor.Point

public constructor.time.time: number

optional public constructor.velocityFilterWeight.velocityFilterWeight?: number

(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

public constructor.x.x: number

public constructor.y.y: number

public _point(): number

Returns

number

.c1.c1: number

.c2.c2: number

.end.end: number

.start.start: number

.t.t: number

public distanceTo(): number

Returns

number

.start.start: constructor.Point

public length(): number

Returns

number

public velocityFrom(): number

Returns

number

.start.start: constructor.Point

Properties

public _canvas: HTMLCanvasElement

public _ctx: CanvasRenderingContext2D

public _isEmpty: boolean

public _lastVelocity: number

public _lastWidth: number

public _mouseButtonDown: boolean

public backgroundColor: string

public dotSize: Function

public maxWidth: number

public minWidth: number

public onBegin: Function

public onEnd: Function

public penColor: string

public points: constructor.Point[]

public velocityFilterWeight: number

Methods

public _addCurve(curve: constructor.Bezier)

Parameters

public _addPoint(point: constructor.Point)

Parameters

public _calculateCurveControlPoints(point1: constructor.Point, point2: constructor.Point, point3: constructor.Point)

Parameters

public _createPoint(event: Event): constructor.Point

Parameters

  • event: Event

Returns

constructor.Point

public _drawCurve(curve: constructor.Bezier, startWidth: number, endWidth: number)

Parameters

public _drawPoint(x: number, y: number, size: number)

Parameters

  • x: number
  • y: number
  • size: number

public _handleMouseEvents()

public _handleTouchEvents()

public _reset()

public _strokeBegin(event: Event)

Parameters

  • event: Event

public _strokeDraw(point: constructor.Point)

Parameters

public _strokeEnd(event: Event)

Parameters

  • event: Event

public _strokeUpdate(event: Event)

Parameters

  • event: Event

public _strokeWidth(velocity: number)

Parameters

  • velocity: number

public clear()

Clears the canvas

public fromDataURL(dataUrl: string)

Draws signature image from data URL

Parameters

  • dataUrl: string

public isEmpty(): boolean

Returns true if canvas is empty, otherwise returns false

Returns

boolean

public toDataURL(): string

Returns signature image as data URL

Returns

string