Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Signature Pad app. To build this Project, we need HTML, CSS and JavaScript. This is an intermediate-level JavaScript project.
If you're interested in Improving your JavaScript Concept and skills further, make sure to go through this Series! It features best projects, each with free downloadable source code. The projects range in difficulty from beginner-friendly to more advanced challenges and tough, making this playlist perfect for learners at all levels of experience with JavaScript. So, let's start this with positive note
Project Folder Structure:
Here I have created a project structure called Signature Pad Online. In this project, I have created three main files naming index.html, style.css and script.js you can create one single file called index.html also and add three codes inside one.
But for better understanding and easy to handle I have created 3 different file structure mentioned above.
These files are the HTML document, the stylesheet, and the script file.
HTML:
- Document Structure:
- Uses <!DOCTYPE html> for HTML5.
- Sets the language to English with <html lang="en">.
- Body Section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Signature Pad</title>
<link rel="stylesheet" href="style.html">
</head>
<body>
<h1>Signature Pad</h1>
<canvas id="signatureCanvas" width="400" height="200"></canvas>
<br>
<button id="clearBtn">Clear</button>
<button id="saveBtn">Save</button>
<script src="script.html"></script>
</body>
</html>
In this section I have styled the project using <style> tag and used attributes like font-family, text-align, margin and border-radius.
<style>
canvas { border: 1px solid black; }
button { margin: 5px; }
</style>
js:
- download Functionality
- canvas functionality
<script>
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.addEventListener('mousedown', function () {
drawing = true;
ctx.beginPath();
});
canvas.addEventListener('mousemove', function (e) {
if (drawing) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
});
canvas.addEventListener('mouseup', function () {
drawing = false;
});
document.getElementById('clearBtn').addEventListener('click', function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
document.getElementById('saveBtn').addEventListener('click', function () {
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = dataURL;
link.download = 'signature.png';
link.click();
});
</script>
Complete Code (Copy):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signature Pad</title>
<style>
canvas { border: 2px solid black; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Signature Pad</h1>
<canvas id="signature" width="400" height="200"></canvas><br>
<button id="clear">Clear</button>
<button id="save">Download Signature</button>
<script>
const canvas = document.getElementById('signature');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.addEventListener('mousedown', () => drawing = true);
canvas.addEventListener('mouseup', () => { drawing = false; ctx.beginPath(); });
canvas.addEventListener('mousemove', draw);
document.getElementById('clear').addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height));
document.getElementById('save').addEventListener('click', () => {
const link = document.createElement('a');
link.download = 'signature.png';
link.href = canvas.toDataURL();
link.click();
});
function draw(e) {
if (!drawing) return;
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}
</script>
</body>
</html>
