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

<?component name="separator" extends="separator" stubonly="true"?>
<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;font-size:1rem"/>
    <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>
    <separator/>
    <div style="text-align:right">
        <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%;
        }
        /* Make the grid look like the bottom half of a long table." */
        .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>