szimek/signature_pad

✍️ Signature Pad — thư viện chữ ký số trên canvas, mượt như vẽ tay thật

Vẽ chữ ký trên web bằng HTML5 canvas, nội suy đường Bézier với độ dày biến thiên theo vận tốc — không phụ thuộc thư viện ngoài, chạy tốt cả desktop lẫn mobile.

Signature Pad của szimek là một thư viện JavaScript/TypeScript gọn nhẹ, dùng để thu nhận chữ ký viết tay ngay trên trình duyệt. Điểm khác biệt cốt lõi nằm ở thuật toán nội suy: thay vì nối các điểm bằng đoạn thẳng, thư viện dựng đường cong Bézier với độ dày nét thay đổi theo vận tốc di chuyển của ngón tay/chuột — lấy cảm hứng từ bài viết "Smoother Signatures" của Square. Kết quả là nét vẽ trông tự nhiên, mượt mà, gần với cảm giác viết trên giấy thật.

✨ Điểm nổi bật

• Nội suy Bézier biến thiên độ dày: dùng thuật toán từ bài viết của Square để tạo nét vẽ mượt, có độ rộng thay đổi theo tốc độ di chuyển.
• Thuần HTML5 canvas, zero dependency: không phụ thuộc thư viện ngoài, bundle gọn nhẹ.
• Hỗ trợ đa nền tảng: chạy ổn định trên mọi trình duyệt desktop và mobile hiện đại.
• API xuất dữ liệu linh hoạt: toDataURL() xuất PNG/JPEG/SVG, toSVG() trả về chuỗi SVG, toData() trả về mảng point groups để lưu lại hoặc khôi phục.
• Nhập lại chữ ký: fromDataURL() và fromData() cho phép render lại chữ ký đã lưu lên canvas.
• Tùy biến nét vẽ: các option như minWidth, maxWidth, throttle, minDistance, velocityFilterWeight, penColor, backgroundColor giúp tinh chỉnh cảm giác viết.
• Hỗ trợ High DPI: demo đi kèm hướng dẫn xử lý resize và màn hình retina, nét vẽ không bị mờ trên thiết bị có mật độ điểm ảnh cao.
• Phân phối đa dạng: cung cấp dưới dạng UMD (script tag qua CDN jsDelivr) và ES6 module (npm/yarn).

💡 Vì sao đáng chú ý

Hầu hết các thư viện chữ ký canvas "thế hệ đầu" chỉ nối các điểm bằng lineTo(), kết quả là nét gãy khúc, mất tự nhiên. Signature Pad xử lý đúng bài toán khó hơn: biến chuỗi điểm rời rạc từ touch/mouse event thành đường cong liên tục với độ dày thay đổi theo vận tốc — mô phỏng gần đúng cảm giác bút thật. Tham số velocityFilterWeight kết hợp minWidth/maxWidth cho phép tinh chỉnh "độ nhạy" của nét vẽ, điều mà nhiều thư viện đối thủ bỏ qua.

Với API tối giản (clear(), isEmpty(), off(), on(), redraw()) cùng khả năng xuất SVG giữ nguyên vector, thư viện này phù hợp để tích hợp vào form xác nhận, hợp đồng điện tử, hệ thống giao hàng cần chữ ký người nhận, hay bất kỳ flow nào cần thu nhận chữ ký tay trên web mà không muốn dựa vào thư viện nặng như Fabric.js hay Konva.

#JavaScript #TypeScript #Canvas #Signature #TiniX