# Add a signature pad using NPM

**URL:** https://community.weweb.io/t/add-a-signature-pad-using-npm/5055
**Category:** How do I?
**Created:** [October 25, 2023, 6:18pm UTC](https://community.weweb.io/t/add-a-signature-pad-using-npm/5055 "2023-10-25T18:18:30Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Mael](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mael/32/13246_2.png) [@Mael](https://community.weweb.io/u/Mael)
#### Post date: [October 30, 2023, 7:19am UTC](https://community.weweb.io/t/add-a-signature-pad-using-npm/5055/4 "2023-10-30T07:19:44Z")

</div>

Firstly, you will need to use our HTML element

In the HTML element you will paste this code

```auto
<canvas id="sig-canvas" width="620" height="160">Hello world</canvas>

<style>#sig-canvas { border: 2px dotted #CCCCCC; border-radius: 15px; cursor: crosshair;}</style>

<script>!function(){window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimaitonFrame||function(t){window.setTimeout(t,1e3/60)};var t=document.getElementById("sig-canvas"),e=t.getContext("2d");e.strokeStyle="#222222",e.lineWidth=4;var n=!1,i={x:0,y:0},o=i;function u(t,e){var n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}}function c(){t.width=t.width}t.addEventListener("mousedown",function(e){n=!0,o=u(t,e)},!1),t.addEventListener("mouseup",function(t){n=!1},!1),t.addEventListener("mousemove",function(e){i=u(t,e)},!1),t.addEventListener("touchstart",function(t){},!1),t.addEventListener("touchmove",function(e){var n=e.touches[0],i=new MouseEvent("mousemove",{clientX:n.clientX,clientY:n.clientY});t.dispatchEvent(i)},!1),t.addEventListener("touchstart",function(e){i=(n=t,o=e,u=n.getBoundingClientRect(),{x:o.touches[0].clientX-u.left,y:o.touches[0].clientY-u.top});var n,o,u,c=e.touches[0],a=new MouseEvent("mousedown",{clientX:c.clientX,clientY:c.clientY});t.dispatchEvent(a)},!1),t.addEventListener("touchend",function(e){var n=new MouseEvent("mouseup",{});t.dispatchEvent(n)},!1),document.body.addEventListener("touchstart",function(e){e.target==t&&e.preventDefault()},!1),document.body.addEventListener("touchend",function(e){e.target==t&&e.preventDefault()},!1),document.body.addEventListener("touchmove",function(e){e.target==t&&e.preventDefault()},!1),function t(){requestAnimFrame(t),n&&(e.moveTo(o.x,o.y),e.lineTo(i.x,i.y),e.stroke(),o=i)}()}();</script>

```

It’s the same code as the link I sent you, but to use it in WeWeb, you need to minify it

On your button to generate the image, you need to add a workflow with a custom javascript action and this code:

```auto
return wwLib.getFrontDocument().getElementById('sig-canvas').toDataURL()

```

On your button to clear, you need to add a workflow with a custom javascript action and this code:

```auto
return wwLib.getFrontDocument().getElementById('sig-canvas').width = wwLib.getFrontDocument().getElementById('sig-canvas').width

```

---

_[View the full topic](https://community.weweb.io/t/add-a-signature-pad-using-npm/5055)._