articleschannelstagsspacestoolkit
LogRocket Blog

Implementing a signature pad with JavaScript

View Original
thumbnail

Table of Contents

  1. Creating the Signature Pad
  2. Customizing the Signature Pad
  3. Handling Responsiveness
  4. Saving and Exporting
  5. Adding More Features

Creating the Signature Pad

In this section, we set up the basic structure of the signature pad by using the <canvas> element and capturing user interactions to draw signatures with JavaScript.

Customizing the Signature Pad

We introduce stroke style customization by adding dropdown menus for color and thickness, along with updating CSS styles for better display of controls.

Handling Responsiveness

To make the signature pad responsive, we adjust the width of the canvas and container, ensuring a better user experience on devices with smaller screens.

Saving and Exporting

We implement functionality to save and export the drawn signature in PNG and JPEG formats, with a white background, enhancing usability and practicality.

Adding More Features

By exploring the use of libraries, we discuss advanced applications of signature pads in e-signature collection, drawing tools, annotation in editors, and visitor management.

코드 복사

<!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>
    #signature-pad {
        border: 2px solid #c3c3c3;
        width: 90%;
        max-width: 600px;
        border-radius: 8px;
    }
</style>
</head>
<body>
<div>
    <select id="stroke-color">
        <option value="black">Black</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
    </select>
    <select id="stroke-thickness">
        <option value="2">Thin</option>
        <option value="5">Medium</option>
        <option value="8">Thick</option>
    </select>
</div>
<canvas id="signature-pad" width="300" height="200"></canvas>
<div>
    <button onclick="clearCanvas()">Clear</button>
    <button onclick="exportSignature('png')">Export as PNG</button>
    <button onclick="exportSignature('jpeg')">Export as JPEG</button>
</div>
<script src="signature-pad.js"></script>
</body>
</html>

const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
let strokeColor = 'black';
let strokeThickness = '2';
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', endDrawing);

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e) {
    if (!isDrawing) return;
    
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeThickness;
    ctx.lineCap = 'round';
    
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function endDrawing() {
    isDrawing = false;
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function exportSignature(format) {
    let dataURL;
    
    if (format === 'png') {
        dataURL = canvas.toDataURL('image/png');
    } else if (format === 'jpeg') {
        dataURL = canvas.toDataURL('image/jpeg');
    }
    
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = `signature.${format}`;
    link.click();
}

여기까지 코드가 완성됐어. 어때? 더 필요한 정보가 있니?