7

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?

Pattle
  • 5,983
  • 8
  • 33
  • 56

4 Answers4

9

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.

kamituel
  • 34,606
  • 6
  • 81
  • 98
5

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/

eriksssss
  • 410
  • 6
  • 6
2

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.

Philipp
  • 67,764
  • 9
  • 118
  • 153
0

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.

Manni-de
  • 1
  • 2