Introduction:
In this tutorial, you’ll learn how to create a simple signature pad using HTML5 Canvas, CSS and JavaScript. This project allows users to draw signatures, save them as images, and even load a previously saved signature using local storage. If you’re looking for a way to add interactivity to your website or application, this project is perfect for you.
Things You Will Learn:
- How to draw on an HTML5 Canvas using JavaScript.
- How to handle mouse and touch events for drawing on the canvas.
- How to save the signature as an image.
- How to load saved data from local storage and clear the canvas.
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally JavaScript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Signature Pad</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="signature-container">
<canvas id="signature-pad" width="400" height="200"></canvas>
<div class="btn">
<button id="clear-btn">Clear</button>
<button id="save-btn">Save</button>
</div>
</div>
<div id="show"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our code using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1ad079;
}
.container {
width: 500px;
margin: auto;
background-color: #ffffff;
border-radius: 10px;
}
canvas {
margin: 30px;
background-color: #ffffff;
border-radius: 10px;
border: 3px solid #1ad079;
}
.btn {
margin-bottom: 10px;
}
button {
margin: 0 5px;
padding: 5px 10px;
cursor: pointer;
background-color: #1ad079;
border: none;
border-radius: 5px;
}
#show {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.signature-img {
width: 100px;
height: 100px;
}
.error {
color: #f66646;
margin: 10px 0;
}
Â
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
const canvas = document.getElementById("signature-pad");
const clearBtn = document.getElementById("clear-btn");
const saveBtn = document.getElementById("save-btn");
const context = canvas.getContext("2d");
let display = document.getElementById("show");
let painting = false;
let drawStart = false;
function startPosition(e) {
painting = true;
drawStart = true;
draw(e);
}
function finishedPosition() {
painting = false;
context.beginPath();
saveState();
}
function draw(e) {
if (!painting) return;
let clientX, clientY;
if (e.type.startsWith("touch")) {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
} else {
clientX = e.clientX;
clientY = e.clientY;
}
context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "round";
context.strokeStyle = "black";
const x = clientX - canvas.offsetLeft;
const y = clientY - canvas.offsetTop;
if (painting) {
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.moveTo(x, y);
} else {
context.moveTo(x, y);
}
}
function saveState() {
localStorage.setItem("canvas", canvas.toDataURL());
}
function loadState() {
const savedData = localStorage.getItem("canvas");
if (savedData) {
const img = new Image();
img.src = savedData;
img.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
};
}
}
canvas.addEventListener("mousedown", (e) => {
painting = true;
drawStart = true;
startPosition(e);
});
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("touchstart", (e) => {
painting = true;
drawStart = true;
startPosition(e);
});
canvas.addEventListener("touchend", finishedPosition);
canvas.addEventListener("touchmove", draw);
clearBtn.addEventListener("click", () => {
drawStart = false;
context.clearRect(0, 0, canvas.width, canvas.height);
saveState();
display.innerHTML = "";
});
saveBtn.addEventListener("click", () => {
if (drawStart) {
const dataURL = canvas.toDataURL();
let img = document.createElement("img");
img.setAttribute("class", "signature-img");
img.src = dataURL;
const aFilename = document.createElement("a");
aFilename.href = dataURL;
aFilename.download = "signature.png";
const filenameTextNode = document.createTextNode("signature.png");
aFilename.appendChild(filenameTextNode);
aFilename.appendChild(img);
display.appendChild(img);
display.appendChild(aFilename);
} else {
display.innerHTML = "<span class='error'>Please sign before saving</span>";
}
});
loadState();
window.onload = (event) => {
drawStart = false;
context.clearRect(0, 0, canvas.width, canvas.height);
saveState();
};
Â
Conclusion:
You have successfully built a signature pad using HTML5 Canvas and JavaScript. This project helps users create signatures, save them as images, and clear or reload their signatures. With just a few lines of code, you’ve added an engaging feature to your web app. Explore further by customizing the canvas or adding additional functionalities!
