Use an Apple Pencil in a web page

apple-pencil

I am developing a web application for a client who is planning to use an iPad when interviewing staff (as part of the recruitment process). Can I use Apple Pencil 2 to collect information in a web page? Specifically:

  • Can I use it to fill out a html <input> or <textarea> field?
  • Can I use it to create a file (which I would attach), i.e. a PDF, GIF, something like that?

Best Answer

Yes, you can use the Apple Pencil 2 to collect information in a web page.

Yes, it can also be used to fill out <input> and <textarea> fields. However, it might not be in the manner that you imagine. If you're hoping that all browsers convert handwriting into computer text when you "draw" on top of an <input> - then you're unfortunately wrong. Instead you'll be able to use a virtual keyboard with the pen to enter text into <input> and <textarea> form fields.

Yes, you can use use Apple Pencil 2 to create files that can be "attached" (i.e. uploaded) from a web page. There's both built-in apps as well as third party apps that allows you to create PDFs, image files, etc. on iPads. These files could for example contain drawings made with the pencil. Browsers support the standard <input type="file"> field for uploads on the iPad.

If you want the user to be able to use handwriting directly on your web page without having to create PDFs or image files, then you can use the <canvas> element. You can easily find many tutorials on how to use the <canvas> element along with a few lines of Javascript to convert touch events from the Apple Pencil 2 into drawings on the canvas (either simple line segments or more advanced bezier curves). This is commonly used to support collecting signatures with the Apple Pencil 2.