How to On Screen Signature Capture with React

How to On Screen Signature Capture with React

On-Screen Signature Capture with 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.

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.

This is image title

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. 

Thank for reading!

react node-js html

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.

Node.js Performance: Node.js vs Io.js

You may already be aware that Raygun uses Node.JS for our API nodes that receive your precious crash reporting data (we also do node.js crash reporting if you’re interested). We’ve peaked in the past at more than 110,000 requests per second coming...

Node.js Live | Node.js Docker Tutorial | Dockerizing Node.js App|Node.js Training|Edureka

🔥 Node.js Certification Training: https://www.edureka.co/nodejs-certification-training This Edureka video on 'Node.js Docker Tutorial' will help you in learn...