Signature

<div class="card">
    <h:form>
        <p:growl>
            <p:autoUpdate />
        </p:growl>

        <p:outputPanel id="input">
            <p:outputLabel for="@next" value="Signature:" style="font-size:1.5rem" styleClass="block mb-2" />
            <p:signature id="signature" widgetVar="sig" style="width:400px;height:200px" value="#{signatureView.value}" required="true" guideline="true"
                 textValue="#{signatureView.text}" base64Value="#{signatureView.base64}" />
        </p:outputPanel>

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

        <p:outputPanel id="output">
            <h:outputText rendered="#{not empty signatureView.value}" style="font-size:1.5rem" styleClass="block mb-2" value="Your Signature" />
            <p:signature id="signed" widgetVar="signed" style="width:400px;height:200px;" value="#{signatureView.value}"
                textValue="#{signatureView.text}" readonly="true" rendered="#{not empty signatureView.value}" backgroundColor="#eaeaea"
                color="#1769aa" />
        </p:outputPanel>
    </h:form>
</div>