The previous code will probably not work, but there’s a solution that will enable us to complete our solution! The touchstart and touchmove events! The touchstart and touchmove work pretty much the same as mousedown and mousemove events.įinally, to convert the drawing/signature into an image, the Canvas API provides a function toDataURL(): this.signatureImg = this.sigPadElement. So with each event, we’ll draw a line linking the current point (current event coordinates) with the last registered point using the CanvasRenderingContext2D.lineTo() function we need to keep repeating the same operation until we finish drawing the signature : onMouseMove(e: any): void Īll this will work perfectly with a mouse! But what do we need to sign with fingers on a mobile phone or a tablet? The Evolis Sig100 Signature Pad features a monochrome 5 interactive LCD signature pad with backlight and connects via USB. It is used for drawing shapes, text, images, and other objects. The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a element.

Here, the clientX et and clientY are the coordinates of the cursor that will help us draw the signature on the canvas using a CanvasRenderingContext2D.

Html signature pad