Windows 8 JavaScript App Development: Draw on HTML5 Canvas

Question

I'm working on a Windows 8 app in JavaScript. I've been taking advantage of the code Samples in the Windows 8 Dev Center but I'm stuck. I want to add a div to my HTML code such as: <div id="drawArea"></div> and use JavaScript so that you can draw in this area with the mouse or your finger (if using a touchscreen) like in MS Paint.

There's no code samples for this in the Dev Center in JavaScript. I would think there would be since Windows 8 is designed for touch screens. I tried some of the many HTML5/JavaScript canvas drawing tutorials from a quick Google search but all are jerky when compiled as a Windows 8 JavaScript app in Visual Studio.

Any suggestions would be appreciated?

Answer 1

There are a couple of samples that show what you're asking (but they're named after "Ink", not touch, so they're easier to miss):

• Input: Ink sample
• Input: Simplified Ink sample

Both show a general drawing experience, using <canvas> for the drawing surface, MSPointer to get input events, and Windows.UI.Input.Inking / InkManager to process (capture, save/load, copy, hit test) strokes.

However, the first sample goes into more detail with touch and other features, but of course has more code to digest.

There's also a quickstart tutorial that shows mouse/pen/touch with ink and <canvas> for display:

• Quickstart: Capturing ink data