Signature Signature is used to draw a signature as an input. Various options such as background color, foreground color, thickness are available for customization. Signature also supports touch enabled devices and legacy browsers without canvas support.
<h:form>
    <p:growl autoUpdate="true" />

    <p:signature style="width:400px;height:200px" widgetVar="sig" value="#{signatureView.value}" required="true" guideline="true"/>

    <div style="margin:20px 0">
        <p:commandButton value="Submit" icon="ui-icon-check" update="output"/>
        <p:commandButton value="Clear" icon="ui-icon-close" type="button" onclick="PF('sig').clear()"/>
    </div>

    <p:outputPanel id="output">
        <h:outputText rendered="#{not empty signatureView.value}" style="font-size:24px;display:block" value="Your Signature" />
        <p:signature style="width:400px;height:200px;" value="#{signatureView.value}" readonly="true" 
                     rendered="#{not empty signatureView.value}" backgroundColor="#eaeaea" color="#03a9f4"/>
    </p:outputPanel>
</h:form>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.