<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Signature Tool</title>
<style>
.canvas {
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<h1>Digital Signature Tool</h1>
<p>Draw your signature below:</p>
<canvas id="signatureCanvas" class="canvas" width="400" height="200"></canvas>
<br>
<button id="clearBtn">Clear</button>
<button id="saveBtn">Save Signature</button>
<script>
// Get canvas element and context
const canvas = document.getElementById("signatureCanvas");
const ctx = canvas.getContext("2d");
// Set initial pen properties
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
// Set default flag values
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// Add event listeners to canvas
canvas.addEventListener("mousedown", (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mousemove", (e) => {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener("mouseup", () => {
isDrawing = false;
});
canvas.addEventListener("mouseout", () => {
isDrawing = false;
});
// Add event listener to clear button
const clearBtn = document.getElementById("clearBtn");
clearBtn.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// Add event listener to save button
const saveBtn = document.getElementById("saveBtn");
saveBtn.addEventListener("click", () => {
const signatureDataURL = canvas.toDataURL();
console.log(signatureDataURL); // Replace with code to save to server or display on page
});
</script>
</body>
</html>
Sunday, May 7, 2023
100% Free Digital Signature Tool: Easily Sign Digitally by Using this Tool and Earn Money Online
Subscribe to:
Post Comments (Atom)
100% Free Language Translator Tool: Easily Translate Language by Using this Tool
Language Translator Language Translator Source Language: Afrikaans Albanian Amharic ...
No comments:
Post a Comment