<div class="signature-pad">
<div class="signature-pad-container">
<canvas class="signature-pad-canvas"></canvas>
<div class="signature-pad-guide"></div>
<div class="signature-pad-placeholder">
<svg xmlns="http://www.w3.org/2000/svg" class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
<span>Sign here</span>
</div>
</div>
<div class="signature-pad-actions">
<button class="signature-pad-btn" type="button">Clear</button>
<button class="signature-pad-btn signature-pad-btn-primary" type="button">Save</button>
</div>
</div>
Requires: ux.min.css
<div class="flex flex-col">
<div class="relative overflow-hidden border-2 border-base-300 rounded-box bg-base-100">
<canvas class="block w-full h-[200px]" style="touch-action: none; cursor: crosshair;"></canvas>
<div class="absolute pointer-events-none" style="left: 10%; right: 10%; bottom: 30%; height: 1px; background: var(--color-base-300);"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-2 pointer-events-none text-sm text-base-content/30">
<svg xmlns="http://www.w3.org/2000/svg" class="size-8 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
<span>Sign here</span>
</div>
</div>
<div class="flex justify-end gap-2 mt-2">
<button class="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm bg-base-200 border border-base-300 rounded-field cursor-pointer hover:bg-base-300" type="button">Clear</button>
<button class="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm text-white bg-primary border border-primary rounded-field cursor-pointer hover:brightness-90" type="button">Save</button>
</div>
</div>
Requires: tw.min.css
// Initialize canvas drawing:
// const canvas = document.querySelector('.signature-pad-canvas');
// const ctx = canvas.getContext('2d');
// let drawing = false;
// canvas.addEventListener('pointerdown', (e) => {
// drawing = true;
// ctx.beginPath();
// ctx.moveTo(e.offsetX, e.offsetY);
// });
// canvas.addEventListener('pointermove', (e) => {
// if (!drawing) return;
// ctx.lineTo(e.offsetX, e.offsetY);
// ctx.stroke();
// });
// canvas.addEventListener('pointerup', () => drawing = false);