How can I help you?
Customization in React Signature component
21 Feb 202616 minutes to read
The Signature component draws strokes using moveTo() and lineTo() methods to create smooth paths on the canvas. You can customize the stroke width, color, and background color or image.
Stroke Width
The variable stroke width is based on maxStrokeWidth, minStrokeWidth, and velocity for a smoother and more realistic signature. Default values: minimum width is 0.5, maximum width is 2.5, and velocity is 0.7.
The following example sets minimum stroke width to 0.5, maximum width to 3, and velocity to 0.7.
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
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>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
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>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));Stroke Color
Specify the stroke color using the strokeColor property, which accepts hexadecimal code, RGB, or text values. The default value is “#000000”.
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";
function App() {
function clickEventHandler() {
let signature = getComponent(document.getElementById('signature'), 'signature');
let color = document.getElementById('text').value;
signature.strokeColor = color;
}
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={clickEventHandler} isPrimary={true}>Set Stroke Color</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));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";
function App() {
function clickEventHandler(): void {
let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
let color: string = document.getElementById('text').value;
signature.strokeColor = color;
}
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={clickEventHandler} isPrimary={true}>Set Stroke Color</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));Background Color
Specify the background color using the backgroundColor property, which accepts hexadecimal code, RGB, or text values. The default value is “#ffffff”.
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";
function App() {
function clickEventHandler() {
let signature = getComponent(document.getElementById('signature'), 'signature');
let bgColor = document.getElementById('text').value;
signature.backgroundColor = bgColor;
}
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={clickEventHandler} isPrimary={true}>Set Background Color</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));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";
function App() {
function clickEventHandler(): void {
let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
let bgColor: string = document.getElementById('text').value;
signature.backgroundColor = bgColor;
}
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={clickEventHandler} isPrimary={true}>Set Background Color</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));Background Image
Specify the background image using the backgroundImage property. The image can be hosted locally or accessed from an online URL.
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";
function App() {
function clickEventHandler() {
let signature = getComponent(document.getElementById('signature'), 'signature');
let url = document.getElementById('text').value;
signature.backgroundImage = url;
}
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={clickEventHandler} isPrimary={true}>Set Background Image</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));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";
function App() {
function clickEventHandler(): void {
let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
let url: string = document.getElementById('text').value;
signature.backgroundImage = url;
}
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={clickEventHandler} isPrimary={true}>Set Background Image</ButtonComponent>
</div>
<div id="signature-control">
<SignatureComponent id='signature'/>
</div>
</div>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));