signature-canvas-plugin/dist/signature-canvas-plugin.esm.js

A reusable signature canvas plugin for capturing eSignatures.

class t{constructor(t){if(!t||!t.canvas)throw new Error("Canvas element is required.");this.canvas=t.canvas,this.placeholder=t.placeholder,this.clearButton=t.clearButton,this.onDraw=t.onDraw||function(){},this.onClear=t.onClear||function(){},this.onStart=t.onStart||function(){},this.onStop=t.onStop||function(){},this.ctx=this.canvas.getContext("2d"),this.drawing=!1,this.lastX=0,this.lastY=0,this.setCanvasSize=this.setCanvasSize.bind(this),this.getCoordinates=this.getCoordinates.bind(this),this.draw=this.draw.bind(this),this.startDrawing=this.startDrawing.bind(this),this.stopDrawing=this.stopDrawing.bind(this),this.handleDrawing=this.handleDrawing.bind(this),this.clear=this.clear.bind(this),this.init()}init(){this.setCanvasSize(),window.addEventListener("resize",this.setCanvasSize),this.canvas.addEventListener("pointerdown",this.startDrawing),this.canvas.addEventListener("pointermove",this.handleDrawing),this.canvas.addEventListener("pointerup",this.stopDrawing),this.canvas.addEventListener("pointerleave",this.stopDrawing),this.canvas.addEventListener("pointercancel",this.stopDrawing),this.canvas.addEventListener("touchstart",(t=>t.preventDefault()),{passive:!1}),this.canvas.addEventListener("touchmove",(t=>t.preventDefault()),{passive:!1}),this.clearButton&&this.clearButton.addEventListener("click",this.clear)}setCanvasSize(){const t=window.devicePixelRatio||1;this.canvas.width=this.canvas.offsetWidth*t,this.canvas.height=this.canvas.offsetHeight*t,this.ctx.scale(t,t),this.ctx.lineWidth=1,this.ctx.lineCap="round",this.ctx.strokeStyle="#000"}getCoordinates(t){const e=this.canvas.getBoundingClientRect();return t.touches?{x:t.touches[0].clientX-e.left,y:t.touches[0].clientY-e.top}:{x:t.clientX-e.left,y:t.clientY-e.top}}draw(t,e){this.ctx.beginPath(),this.ctx.moveTo(this.lastX,this.lastY),this.ctx.lineTo(t,e),this.ctx.stroke(),[this.lastX,this.lastY]=[t,e],this.onDraw(t,e)}startDrawing(t){t.preventDefault(),this.placeholder&&(this.placeholder.style.display="none"),this.clearButton&&(this.clearButton.style.display="block"),this.drawing=!0;const{x:e,y:s}=this.getCoordinates(t);[this.lastX,this.lastY]=[e,s],this.onStart()}stopDrawing(){this.drawing&&(this.drawing=!1,this.onStop())}handleDrawing(t){if(!this.drawing)return;t.preventDefault();const{x:e,y:s}=this.getCoordinates(t);this.draw(e,s)}clear(){this.ctx&&this.canvas&&(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.placeholder&&(this.placeholder.style.display="block"),this.clearButton&&(this.clearButton.style.display="none"),this.onClear())}getSignature(){return this.canvas.toDataURL("image/png")}destroy(){window.removeEventListener("resize",this.setCanvasSize),this.canvas.removeEventListener("pointerdown",this.startDrawing),this.canvas.removeEventListener("pointermove",this.handleDrawing),this.canvas.removeEventListener("pointerup",this.stopDrawing),this.canvas.removeEventListener("pointerleave",this.stopDrawing),this.canvas.removeEventListener("pointercancel",this.stopDrawing),this.canvas.removeEventListener("touchstart",(t=>t.preventDefault()),{passive:!1}),this.canvas.removeEventListener("touchmove",(t=>t.preventDefault()),{passive:!1}),this.clearButton&&this.clearButton.removeEventListener("click",this.clear)}}function e(e={}){const s=e.selector||".signature-canvas";document.querySelectorAll(s).forEach((s=>{const i=s.previousElementSibling,n=s.closest(".Signature__form").querySelector(".signatureClearButton");new t({canvas:s,placeholder:i,clearButton:n,onDraw:e.onDraw,onClear:e.onClear,onStart:e.onStart,onStop:e.onStop})}))}export{t as SignatureCanvas,e as initializeSignatureCanvases};