DEV Community

Cover image for How to create signature pad in html | signature pad JavaScript
Stackfindover
Stackfindover

Posted on

How to create signature pad in html | signature pad JavaScript

Hello guys, today I am going to show you how to create a signature pad using HTML CSS & JavaScript, in this video, I will create a JavaScript signature pad using the signature pad JavaScript library.

JavaScript signature pad step by step

Step 1 β€” Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating an awesome responsive website footer. In the next step, you will start creating the structure of the webpage.

You may like these also:

  1. How to create currency converter in javascript
  2. How to Integrate Webcam using JavaScript

Step 2 β€” Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create signature pad in html</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html> 
Enter fullscreen mode Exit fullscreen mode

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<div class="flex-row">
       <div class="wrapper">
           <canvas id="signature-pad" width="400" height="200"></canvas>
       </div>
       <div class="clear-btn">
           <button id="clear"><span> Clear </span></button>
       </div>
   </div>
Enter fullscreen mode Exit fullscreen mode

Step 3 β€” Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: #ececec;
    overflow: hidden;
}
.flex-row {
    display: flex;
}
.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}
canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
button#clear {
    height: 100%;
    background: #4b00ff;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
button#clear span {
    transform: rotate(90deg);
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

Step 4 β€” Adding signature pad javascript library and code

In this step, we will add some javascript code to generate canvas and add the signature pad library.

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.5/signature_pad.min.js" integrity="sha512-kw/nRM/BMR2XGArXnOoxKOO5VBHLdITAW00aG8qK4zBzcLVZ4nzg7/oYCaoiwc8U9zrnsO9UHqpyljJ8+iqYiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
       var canvas = document.getElementById("signature-pad");

       function resizeCanvas() {
           var ratio = Math.max(window.devicePixelRatio || 1, 1);
           canvas.width = canvas.offsetWidth * ratio;
           canvas.height = canvas.offsetHeight * ratio;
           canvas.getContext("2d").scale(ratio, ratio);
       }
       window.onresize = resizeCanvas;
       resizeCanvas();

       var signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(250,250,250)'
       });

       document.getElementById("clear").addEventListener('click', function(){
        signaturePad.clear();
       })
   </script>
Enter fullscreen mode Exit fullscreen mode

#Final Result

Top comments (4)

Collapse
 
lotus4p profile image
Lotus4P

Hello! Amazing job. This was greatly helpful and informative. One more thing I Need to understand is how to incorporate this tool to a html customers form for instance to make it submit to destination Email. Or even to save the canvas drawing to your computer Documents.

Collapse
 
dariusz_ca8d profile image
Dariusz Zakrzewski

is this working on iphone? I seem to be getting some problems implementing signature field on ios safari - with the url bar in the bottom the js seems to be broken has anybody else had this issue too? similar to this form:
piotnetforms.com/docs/signature-fi...

Collapse
 
prabhukadode profile image
Prabhu

Nice

Collapse
 
ldiazortiz profile image
ldiazortiz

Great πŸ‘πŸ½