<div class="signature-wrapper">
  <h3>Sign Here</h3>
  <canvas id="sig-canvas" width="400" height="200"></canvas>
  <div class="sig-controls">
    <button id="clearBtn">Clear</button>
    <button id="saveBtn" class="save">Save</button>
  </div>
</div>

.signature-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
h3 {
  color: #374151;
}
canvas {
  background: #fff;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
}
.sig-controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
button {
  padding: 8px 20px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}
button.save {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}
button:hover {
  opacity: 0.9;
}

const canvas = document.getElementById("sig-canvas");
const ctx = canvas.getContext("2d");
let writingMode = false;

ctx.lineWidth = 2;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.strokeStyle = "#1f2937";

const getTargetPosition = (e) => {
  const rect = canvas.getBoundingClientRect();
  if (e.touches) {
    return {
      x: e.touches[0].clientX - rect.left,
      y: e.touches[0].clientY - rect.top
    };
  }
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
};

const handlePointerMove = (e) => {
  if (!writingMode) return;
  e.preventDefault();
  const { x, y } = getTargetPosition(e);
  ctx.lineTo(x, y);
  ctx.stroke();
};

const handlePointerUp = () => {
  writingMode = false;
  ctx.closePath();
};

const handlePointerDown = (e) => {
  writingMode = true;
  ctx.beginPath();
  const { x, y } = getTargetPosition(e);
  ctx.moveTo(x, y);
  e.preventDefault();
};

canvas.addEventListener("mousedown", handlePointerDown);
canvas.addEventListener("touchstart", handlePointerDown);
canvas.addEventListener("mouseup", handlePointerUp);
canvas.addEventListener("touchend", handlePointerUp);
canvas.addEventListener("mousemove", handlePointerMove);
canvas.addEventListener("touchmove", handlePointerMove);

document.getElementById("clearBtn").addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

Back to Snippets

Digital Signature Pad JS

Capture signatures directly in the browser with this canvas pad. It tracks mouse and touch movements to draw smooth lines, so users can sign documents easily on both mobile phones and desktop computers.

435

#javascript

#css

#signature

#canvas

#drawing

#form

#input

#pad

/HTML *CSS ()JS Output Live Updates

const canvas = document.getElementById("sig-canvas");
const ctx = canvas.getContext("2d");
let writingMode = false;

ctx.lineWidth = 2;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.strokeStyle = "#1f2937";

const getTargetPosition = (e) => {
  const rect = canvas.getBoundingClientRect();
  if (e.touches) {
    return {
      x: e.touches[0].clientX - rect.left,
      y: e.touches[0].clientY - rect.top
    };
  }
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
};

const handlePointerMove = (e) => {
  if (!writingMode) return;
  e.preventDefault();
  const { x, y } = getTargetPosition(e);
  ctx.lineTo(x, y);
  ctx.stroke();
};

const handlePointerUp = () => {
  writingMode = false;
  ctx.closePath();
};

const handlePointerDown = (e) => {
  writingMode = true;
  ctx.beginPath();
  const { x, y } = getTargetPosition(e);
  ctx.moveTo(x, y);
  e.preventDefault();
};

canvas.addEventListener("mousedown", handlePointerDown);
canvas.addEventListener("touchstart", handlePointerDown);
canvas.addEventListener("mouseup", handlePointerUp);
canvas.addEventListener("touchend", handlePointerUp);
canvas.addEventListener("mousemove", handlePointerMove);
canvas.addEventListener("touchmove", handlePointerMove);

document.getElementById("clearBtn").addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});