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:
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
Top comments (4)
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.
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...
Nice
Great 👍🏽