The Signature component is an input control allowing free drawing powered by HTML5 canvas.

<zk>
	<div sclass="fadeIn">
		<grid>
			<columns>
				<column align="right"/>
				<column align="right"/>
			</columns>
			<rows>
				<row>
					<label value="Delivery date:"/>
					<label value="May 26, 2018"/>
				</row>
				<row>
					<label value="Subtotal:"/>
					<label value="$5,100.00"/>
				</row>
				<row>
					<label value="Discount (15%):"/>
					<label value="($765.00)"/>
				</row>
				<row>
					<label value="Offer Price:" style="font-weight: bold;"/>
					<label value="$4,335.00" style="font-weight: bold;"/>
				</row>
			</rows>
		</grid>
		<separator/>
	</div>
	<label value="Sign Below:" style="font-weight: bold;"/>
	<separator/>
	<signature id="signArea" height="200px"
			   penColor="#4a4a4a" penSize="2"
			   undoLabel="Undo"
			   saveLabel="Save"
			   clearLabel="Clear"
			   onSave="signatureImage.setContent(event.getMedia()); submit.setDisabled(false);"/>
	<separator/>
	<hlayout valign="middle">
		<combobutton label="Pen size" iconSclass="z-icon-edit">
			<popup>
				<radiogroup orient="vertical" sclass="checkmark"
							onCheck="signArea.setPenSize((int) self.getSelectedItem().getValue());">
					<radio label="Small (1px)" value="${1}"/>
					<radio label="Medium (2px)" value="${2}" selected="true"/>
					<radio label="Large (3px)" value="${3}"/>
				</radiogroup>
			</popup>
		</combobutton>
		<radiogroup orient="horizontal" sclass="flat" onCheck="signArea.setPenColor(self.getSelectedItem().getValue());">
			<radio label="Black" iconSclass="z-icon-square" value="#4a4a4a" style="color: #4a4a4a" selected="true"/>
			<radio label="Blue" iconSclass="z-icon-square" value="#0055b7" style="color: #0055b7"/>
			<radio label="Red" iconSclass="z-icon-square" value="#d0021b" style="color: #d0021b"/>
		</radiogroup>
	</hlayout>
	<div align="right" style="padding-right: 16px">
		<button id="submit" label="Submit Offer" disabled="true"
				onClick='signaturePreview.open(self, "before_end");'/>
	</div>

	<popup id="signaturePreview">
		<label value="Your Signature from Server:"/>
		<separator/>
		<image id="signatureImage" width="300px" height="100px"/>
	</popup>

	<style>
		.z-radiogroup.checkmark .z-radio input,
		.z-radiogroup.flat .z-radio input {
			display: none;
		}

		.z-radiogroup.checkmark .z-radio .z-radio-content,
		.z-radiogroup.flat .z-radio input+.z-radio-content {
			display: inline-block;
			padding: 6px;
			border-radius: 4px;
		}
		.z-radiogroup.flat .z-radio input:checked+.z-radio-content {
			background-color: #e8f5ff;
		}

		.z-radiogroup.checkmark {
			position: relative;
		}
		.z-radiogroup.checkmark .z-radio .z-radio-content {
			position: relative;
			margin-left: 15px;
		}
		.z-radiogroup.checkmark .z-radio input:checked+.z-radio-content:before {
			content: '\f00c';
			font-family: 'ZK85Icons', 'fontawesome';
			position: absolute;
			right: 100%;
		}

		.fadeIn {
			position: relative;
		}
		.fadeIn::after {
			display: block;
			content: ' ';
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			background-image: linear-gradient( to bottom, rgba(255,255,255,1.0), rgba(255,255,255,0.0));
		}
	</style>
</zk>