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

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> 

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>



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;
}



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>



#Final Result


Print Share Comment Cite Upload Translate
APA
Stackfindover | Sciencx (2024-03-29T12:57:28+00:00) » How to create signature pad in html | signature pad JavaScript. Retrieved from https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/.
MLA
" » How to create signature pad in html | signature pad JavaScript." Stackfindover | Sciencx - Sunday June 27, 2021, https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/
HARVARD
Stackfindover | Sciencx Sunday June 27, 2021 » How to create signature pad in html | signature pad JavaScript., viewed 2024-03-29T12:57:28+00:00,<https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/>
VANCOUVER
Stackfindover | Sciencx - » How to create signature pad in html | signature pad JavaScript. [Internet]. [Accessed 2024-03-29T12:57:28+00:00]. Available from: https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/
CHICAGO
" » How to create signature pad in html | signature pad JavaScript." Stackfindover | Sciencx - Accessed 2024-03-29T12:57:28+00:00. https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/
IEEE
" » How to create signature pad in html | signature pad JavaScript." Stackfindover | Sciencx [Online]. Available: https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/. [Accessed: 2024-03-29T12:57:28+00:00]
rf:citation
» How to create signature pad in html | signature pad JavaScript | Stackfindover | Sciencx | https://www.scien.cx/2021/06/27/how-to-create-signature-pad-in-html-signature-pad-javascript/ | 2024-03-29T12:57:28+00:00
https://github.com/addpipe/simple-recorderjs-demo