On-Screen Signature Capture Using React

In this quick tutorial, we will learn how to capture on-screen signature from the user using HTML canvas. Also, we will cover different properties and functions available with the React-canvas-draw package.

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.

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.

// If using npm 5.1 or earlier
create-react-app DemoApp

// If using npm > 5.1
npx create-react-app DemoApp

Then, we need to install the react-canvas-draw npm package by using the below command.

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.

// Demo.js

import React, { Component } from 'react';
import CanvasDraw from "react-canvas-draw";

export class Demo extends Component {

  render() {
    return (
      <div>
        <CanvasDraw
        ref={canvasDraw => (this.myCanvas = canvasDraw)}
        />
        <button
            onClick={() => {
              this.myCanvas.clear();
            }}
        >Clear
        </button>
      </div>
    );
  }
}

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.

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
// Our re-usable canvas component
import { Demo } from './Demo';

class App extends Component {

  render() {
    return (
      <div>
        <h2>On-Screene Signature using React</h2><hr/>
        <Demo />
      </div>
    );
  }
}

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.

 

 

 

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.