JavaScript Signature Pad [ How to Create Signature Pad in HTML ]

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

JavaScript signature pad step by step

How to get signature pad JavaScript library

#1 Open Web browser

First of all we have to open Chrome browser on our device.

#2 Search signature pad

After opening the Chrome browser, we have to search “signature pad js cdn”, on searching it, we will see many results, out of these results, we have to click on the link shown in the screenshot below.

#2 Open signature pad cdnjs

We can get the signature pad javascript library from the above cdnjs site.

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 a JavaScript signature pad. In the next step, you will start creating the structure of the webpage.

You may like these also:

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>

JavaScript signature pad final result

If you want source code you can download it from the below button

Download Code

Best signature pad on Codepen

#1 ? JavaScript Canvas Signature Pad

Canvas Signature Pad using HTML, CSS and JavaScript, which was developed by Jeffrey Bennett. Moreover, you can customize it according to your wish and need.

Author:	Jeffrey Bennett
Created on:	April 23, 2016
Made with:	HTML, CSS & JavaScript
Demo Link:	Source Code / Demo
Tags:	JavaScript Canvas Signature Pad

#2 Signature Pad html

A Signature Pad using HTML, CSS and JavaScript, which was developed by Alexander Kavanaugh. Moreover, you can customize it according to your wish and need.

Author:	Alexander Kavanaugh
Created on:	November 21, 2018
Made with:	HTML, CSS & JavaScript
Demo Link:	Source Code / Demo
Tags:	Signature Pad HTML

#3 Signature_Pad throttle version

Simple Signature Pad using HTML, CSS and JavaScript, which was developed by Kunuk Nykjær. Moreover, you can customize it according to your wish and need.

Author:	Kunuk Nykjær
Created on:	February 7, 2017
Made with:	HTML, CSS & JavaScript
Demo Link:	Source Code / Demo
Tags:	Simple Signature Pad

We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.