Post
Ask Question

On-Screen Signature Capture Using React

Introduction
 
Sometimes, we need to capture the user's signature using screen itself, like using touch pen, mouse or any other device which is compatible with like a kiosk where we need to capture the customer signature for the verification purpose or something like that.
 
For this requirement, different possibilities are there to implement such a thing and one of those is an HTML canvas where we can draw the free-hand drawing. Similarly, in React, there is a package named react-canvas-draw, which indirectly uses the canvas for drawing surface.
 
This package contains the different props and functions so that we can implement the feature very quickly. This is not compulsory to use this package but it will help you to implement such things without much complexity.
 
There are different operations supported as given below.
  • Draw on canvas
  • Clear canvas drawing
  • Save data in a form of a picture or any significant object
  • Undo the last drawing object
  • Load the previously saved data
Prerequisites
 
Node 8.10.0 or a later version is required. 
 
In order to work with this project, we need to create a new project using create-react-app, and if you don't have already installed the package, then execute the below npm command.
  1. npm install -g create-react-app  
After the installation of the above package, now we can create our new React app using the below command.
  1. // If using npm 5.1 or earlier  
  2. create-react-app DemoApp  
  3.   
  4. // If using npm > 5.1  
  5. npx create-react-app DemoApp   
Then, we need to install the react-canvas-draw npm package by using the below command.
  1. npm install react-canvas-draw --save  
Our next step is to create the new file named Demo.js and replace the following lines of code.
  1. // Demo.js  
  2.   
  3. import React, { Component } from 'react';  
  4. import CanvasDraw from "react-canvas-draw";  
  5.   
  6. export class Demo extends Component {  
  7.   
  8.   render() {  
  9.     return (  
  10.       <div>  
  11.         <CanvasDraw   
  12.         ref={canvasDraw => (this.myCanvas = canvasDraw)}  
  13.         />  
  14.         <button  
  15.             onClick={() => {  
  16.               this.myCanvas.clear();  
  17.             }}  
  18.         >Clear  
  19.         </button>  
  20.       </div>  
  21.     );  
  22.   }  
  23. }  
In this file, i have imported the package react-canvas-draw, and used that inside the render() method. Keep in mind that this package indirectly implements the HTML canvas to draw anything. We can also clear those drawing objects or undo the previos drawing objects.
 
Now, open the index.js file and use your Demo.js file in order to render the actual signature component.
  1. import React, { Component } from 'react';  
  2. import { render } from 'react-dom';  
  3. import './style.css';  
  4. // Our re-usable canvas component  
  5. import { Demo } from './Demo';  
  6.   
  7. class App extends Component {  
  8.   
  9.   render() {  
  10.     return (  
  11.       <div>  
  12.         <h2>On-Screene Signature using React</h2><hr/>  
  13.         <Demo />  
  14.       </div>  
  15.     );  
  16.   }  
  17. }  
  18.   
  19. render(<App />, document.getElementById('root'));  
The index component is our root component, from where we are going to render our separate component. Now, let's run our app and see how it looks like. For that,  use the command npm start.
 
On-Screen Signature Capture Using React 
 
As you can see, I am able to draw the signature canvas using a mouse and at the same time, we can also remove our signature or any other drawing object.
 
Conclusion
 
This kind of functionality can be pretty easy to implement using HTML canvas where we can draw different objects. Also, we are able to draw different shapes, text, curves, and many more objects.