Draw Signature

A user can use this widget to draw a signature (or basically anything else) on a canvas. The widget generates an image and stores it in a datafield<file>. All other widget properties have default values and may be left blank.

Properties

Property	DataType	Description
Output	Datafield, File	Store the output image in this datafield.
Image extension (png/jpg)	text, Expression	Changes the output file extension. By default this value is set to "png". Allowed values are "png" and "jpg". Note that JPG does not support transparancy. JPG can be used to create smaller files compared to PNG. Use the 'Background color' property to add a custom background color.
Image name	text, expression	Changes the output file name. By default this value is: "image".
Display clear-button	boolean	Allows the user to clear the canvas by showing a clear button. By default this value is true.

Behavior

Property	Data Type	Description
Maintain aspect ratio	Boolean	Maintain the aspect ratio of 'width' and 'height' when the width changes because of responsive design.

Appearance

Property	Data Type	Description
Background color	Text, Expression	Changes the background color of the output image. By default this value is set to "white". This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Border color	Text, Expression	Changes the border color of the signature widget. The border is not included in the output image. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".
Clear-button context	dropdown, Bootstrap context	Changes the context of the clear button using bootstrap color contexts, such as "success" and "danger".
Clear-button size	Dropdown	The clear button can either be: extra small, small, normal or large.
Clear-button text	Text, Expression	Changes the text on the clear button. By default this value is set to "Clear".
Clear-button full widt	Boolean	When true: this property makes sure that the clear button has the same width as the canvas. By default this value is false.
Height	Number, Expression	The height of the canvas in pixels. The default value is 300. The height may change on smaller screens when 'Maintain aspect ratio ' is true. Otherwise the height will remain the same on all devices.
Width	Number, Expression	The width of the canvas in pixels. The default value is 600. Note that the width will never be larger than the width of its container. Therefore, the canvas width may be smaller on devices with smaller screens.
Minimal stroke width	Number, Expression	This widget simulates 'pen presure' by changing stroke width. By default the minimal stroke width is 0.5, allowing thin lines when drawing fast.
Maximum stroke width	Number, Expression	Defines the maximum stroke width of the signature. By default the maximum stroke width is 2.5, 5 times thicker than the minimum stroke width.
Stroke color	Text, Expression	By default a user can draw a black signature. Use this property to change the pen color. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red".