Search results

Customization in React Signature component

24 May 2022 / 4 minutes to read

The Signature component draws stroke/path using moveTo() and lineTo() methods to connect one or more points while drawing in canvas. The stroke width can be modified by using its color and width. And the background can be modified by using its background color and background image.

Stroke Width

The variable stroke width is based on the values of maxStrokeWidth, minStrokeWidth and velocity for smoother and realistic signature. The default value of minimum stroke width is set as 0.5, maximum stroke width is set as 2.5 and velocity is set as 0.7.

In the following example, minimum stroke width is set as 0.5, maximum stroke width is set as 3 and velocity is set as 0.7.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<div id='container'>
        <div className='signature-control'>
            <h4>Sign here</h4>
            <SignatureComponent id='signature' maxStrokeWidth={3} minStrokeWidth={0.5} velocity={0.7}/>
        </div>
      </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React Signature</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React Signature Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
public render() {
    return (
       <div id='container'>
        <div className='signature-control'>
            <h4>Sign here</h4>
            <SignatureComponent id='signature' maxStrokeWidth= {3} minStrokeWidth= {0.5} velocity= {0.7}/>
        </div>
      </div>
    );
}
};
ReactDOM.render(<App />, document.getElementById('element'));

Stroke Color

Color of the stroke can be specified by using strokeColor property and it accepts hexadecimal code, RGB, and text. The default value of this property is “#000000”.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.clickEventHandler = this.clickEventHandler.bind(this);
    }
    clickEventHandler() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        let color = document.getElementById('text').value;
        signature.strokeColor = color;
    }
    render() {
        return (<div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the Stroke Color Value"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Stroke Color</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React Signature</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React Signature Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
constructor(props: any) {
    super(props);
    this.clickEventHandler = this.clickEventHandler.bind(this);
}
public clickEventHandler(): void {
   let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
   let color: string = document.getElementById('text').value;
   signature.strokeColor = color;
}
public render() {
    return (
       <div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the Stroke Color Value"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Stroke Color</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>
    );
}
};
ReactDOM.render(<App />, document.getElementById('element'));

Background Color

Background color of a signature can be specified by using backgroundColor property and it accepts hexadecimal code, RGB, and text. The default value of this property is “#ffffff”.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.clickEventHandler = this.clickEventHandler.bind(this);
    }
    clickEventHandler() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        let bgColor = document.getElementById('text').value;
        signature.backgroundColor = bgColor;
    }
    render() {
        return (<div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the Background Color Value"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Background Color</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React Signature</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React Signature Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
constructor(props: any) {
    super(props);
    this.clickEventHandler = this.clickEventHandler.bind(this);
}
public clickEventHandler(): void {
   let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
   let bgColor: string = document.getElementById('text').value;
   signature.backgroundColor = bgColor;
}
public render() {
    return (
       <div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the Background Color Value"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Background Color</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>
    );
}
};
ReactDOM.render(<App />, document.getElementById('element'));

Background Image

Background image of a signature can be specified by using backgroundImage property. The background image can be set by either hosting the image in our local IIS or online image.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.clickEventHandler = this.clickEventHandler.bind(this);
    }
    clickEventHandler() {
        let signature = getComponent(document.getElementById('signature'), 'signature');
        let url = document.getElementById('text').value;
        signature.backgroundImage = url;
    }
    render() {
        return (<div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the URL of the background Image"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Background Image</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React Signature</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React Signature Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
constructor(props: any) {
    super(props);
    this.clickEventHandler = this.clickEventHandler.bind(this);
}
public clickEventHandler(): void {
   let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
   let url: string = document.getElementById('text').value;
   signature.backgroundImage = url;
}
public render() {
    return (
       <div id='container'>
            <div id="signature-base-control">
                <div id="input">
                    <input type="text" id="text" placeholder="Enter the URL of the background Image"></input>
                    <ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Set Background Image</ButtonComponent>
                </div>
                <div id="signature-control">
                    <SignatureComponent id='signature'/>
                </div>
            </div>
      </div>
    );
}
};
ReactDOM.render(<App />, document.getElementById('element'));

See Also