I want to create a web page where the user would be able to write their signature using a stylus (like when you sign for a parcel or package). Does anyone know if this is possible? I'm not sure exactly where to start but I'm guessing that I would have to use the element and javascript?

I want to create a web page where the user would be able to write their signature using a stylus (like when you sign for a parcel or package). Does anyone know if this is possible? I'm not sure exactly where to start but I'm guessing that I would have to use the element and javascript?

• javascript
• html
• canvas

4 Answers 4

It's perfectly possible as long as the device your client will be using supports touch input using stylus.

You can see this tutorial to see how to use <canvas> element to create a simple drawing app.

To see which browsers support canvas, see this page.

If you specifically want stylus support, you'll want to support features beyond the typical mouse x,y coordinates.

Currently, only stylus-specific input I know of is the Wacom Web plugin/API. This supports these features like stylus pressure, stylus angle, and multi-touch for the web.

http://www.wacomeng.com/web/

Future considerations for a HTML5's 'pointerevents' API generically supporting pressure, angle and touch events for all tablet types are proposed here.

http://www.w3.org/TR/pointerevents/

There is no API specific to a stylus which supports things like pressure-sensitivity or orientation. But in most cases a stylus can be used as a mouse. In this case it will create normal mouse events like mousedown, mousemove and mouseup. You can add event handlers for these events to your canvas and react to them appropriately.

Here a simple example of a self-contained URL that uses "canvas" and pointer events to create a canvas page that allows drawing with a stylus. (It works for me with a Wacom Intuit):

    data:text/html,<canvas id="v"><style> /* Disable intrinsic user agent touch behaviors (such as panning or zooming) */ canvas { touch-action: none; } </style><script>d=document,d.body.style.margin=0,f=0,c=v.getContext("2d"),v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,x=e=>e.clientX||e.touches[0].clientX,y=e=>e.clientY||e.touches[0].clientY,d.onpointerdown=d.ontouchstart=e=>{f=1,e.preventDefault(),c.moveTo(x(e),y(e)),c.beginPath()},d.onpointermove=d.ontouchmove=e=>{f&&(c.lineTo(x(e),y(e)),c.stroke())},d.onpointerup=d.ontouchend=e=>f=0</script>

Paste it in your browser address field and try drawing with your stylus.