This content originally appeared on DEV Community and was authored by Stackfindover
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
This content originally appeared on DEV Community and was authored by Stackfindover
Stackfindover | Sciencx (2021-06-27T04:09:38+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.