SignaturePad.penColor = '#000000' //Stiftfarbe

SignaturePad.maxWidth = 5 //maximale Breite des Stiftes SignaturePad.minWidth = 1 //minimale Breite des Stiftes Var signaturePad = new SignaturePad(canvas) Now we have to “ wire” the canvas with the corresponding functions: var wrapper = document.getElementById('signature-pad'),Ĭanvas = wrapper.querySelector('canvas'), Here we can define width, height and frame color. There is also a hidden form field, which we use to transfer the data to our PHP script.įor the definition of our design we use some CSS code: We see here an empty canvas, which will later realize our signature field. We then define the elements for the signature field in our form: There we add the Java-Script library for the signature to the closing body tag: The first step is to create an HTML file. The whole example is available for download at the end. The component uses different stroke widths when drawing, so that the impression of a real pen or signature is created. Our example will look like this:Īs you can already see in the screenshot, we do not want to completely reinvent the wheel, but use an open source component for the basic functions. The form is then processed by a PHP script. Optionally with mouse or on mobile devices with touch functions. In our example we want to create a form that allows the user to create a signature (or any other drawing). This opens up new possibilities for online forms, such as the implementation of a signature function. Thanks to the Canvas element of HTML5, complex drawings and drawing functions are possible in HTML pages.

How to add signature in outlook 2018