Getting Started

28 Nov 20173 minutes to read

The Essential EmberJS Signature simplifies creation of a signature capture in a browser, allowing a user to draw a signature using mouse or touch.

This section explains briefly about how to create a Signature in EmberJS by the following step-by-step instructions. The following screenshot demonstrates the functionality of Signature widget.
Before going to getting started with Signature widget please refer Getting Started with Syncfusion EmberJS application to know how to create simple Essential EmberJS application.
If you want to know individual script reference to create Signature Please Refer under Requires

Create Signature Control

Create an HTML file and add the following template in the HTML file.

HTML

<div class="control">
                    <h3>Sign here</h3>
                
                  {{ej-signature id="signature" e-height=model.height }}
                 
            </div>

Add the following code in corresponding script file.

JS

export default Ember.Route.extend({
    model(){
        return {
                height: "400px"
            }
        }
    });

The following screenshot is the output for the above code.

Adjusting Signature Size

You can customize the width and height of the Signature by width and height properties. These properties completely depend on signature canvas. The width and height are adjusted within the signature canvas.

The following code example is used to render the Signature control with customized width and height.

Add the following HTML to render signature with customized width and height.

HTML

<div class="control">
                    <h3>Sign here</h3>
                
                  {{ej-signature id="signature" e-height=model.height e-width=model.width e-isResponsive=true e-strokeWidth=model.strokeWidth}}
                  
        </div>

Add the following in correcponding script file to render signature with customized width and height.

JAVASCRIPT

export default Ember.Route.extend({
        model(){
        return {
            height: "400px",
            isResponsive: true,
            strokeWidth: 3,
            width:"350px"
         }
        }
        });

The following screenshot illustrates signature with customized width and height.