Signature Rendering Demo
My fork of Thomas Bradley's javascript excellent signature library: https://github.com/ezl/signature-pad
Original library: https://github.com/thomasjbradley/signature-pad/
This page just demonstrates two things:
- Smoothing a signature: Both signatures below are generating using the same source data.
- Automatic resizing: The first version will scale the signature size and center it on the canvas if you resize the browser.
The first is the fork with smoothing by me, the first is the original library by Thomas Bradley.
Bezier Curves w/ Variable Pen Width
Smoothing: Bezier curves that pass through all sampled points
Stroke width is determined by using distance between measured points as a proxy for the mouse velocity at the time the signature was created.
Resizing: This signature also resizes if you refresh or resize the browser window.
This finds the largest intersection of the recording canvas and rendering canvas, maps the recorded signature points to that new canvas, then centers it to generate a scaled, centered signature.
Original Library
Smoothing: Straight line segments between sampled signature points (original)
The original method creates straight lines and kinks between the sampled points.
Resizing: The data is saved as a (x,y) coordinates from the top left corner of the canvas, measured in pixels.
As a result, if you regenerate the signature on a canvas that is smaller than the canvas on which the signature was recorded, the signature will render off the canvas.