By
Published
Jan 15 2019 02:37 PM
560
Views
First published on MSDN on May 15, 2018
With this control, you can now support simple and complex inking scenarios in your web application. For example, drawing, signature capture, tilt and shading and multiple levels of pressure sensitivity.
The canvas control is a good example of the 'progressive' nature of EdgeHTML. That is the Inking extensions 'light up' when your page is run in a Windows PWA container.
With the following code, we can detect if we're running as a Windows PWA and if the
Next, we'll initialize the Inking properties of the canvas control:
Sample code can be found here: https://github.com/Microsoft/Windows-AppConsult-samples-PWA/tree/master/Canvas
Resources:
Windows 10: Inking and the InkCanvas
InkCanvas Namepace
Progressive Web Apps on Windows
<canvas>
control. These extensions include support for the methods and properties of the InkCanvas class documented here:
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.inkcanvas
.
With this control, you can now support simple and complex inking scenarios in your web application. For example, drawing, signature capture, tilt and shading and multiple levels of pressure sensitivity.
The canvas control is a good example of the 'progressive' nature of EdgeHTML. That is the Inking extensions 'light up' when your page is run in a Windows PWA container.
With the following code, we can detect if we're running as a Windows PWA and if the
InkingPresenter
is supported since this is supported in EdgeHTML 17.17134 introduced in the Windows 1803 release. If the test is successful we'll display UI that will let us change the inking properties of the canvas control.
function runningWindows10withInkCanvasSupport() {
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.UI.Input.Inking.InkPresenter !== 'undefined')
return true;
else
return false;
}
Next, we'll initialize the Inking properties of the canvas control:
try {
var Inking = Windows.UI.Input.Inking;
var drawingAttributes = new Inking.InkDrawingAttributes();
}
catch (e) { }
// Set initial ink stroke attributes.
Inking.InkInputProcessingMode = InkInputProcessingMode.Inking;
drawingAttributes.color = Windows.UI.Colors.black;
drawingAttributes.ignorePressure = false;
drawingAttributes.fitToCurve = true;
canvasContext.msInkPresenter.updateDefaultDrawingAttributes(drawingAttributes);
canvasContext.msInkPresenter.inputDeviceTypes =
Windows.UI.Core.CoreInputDeviceTypes.mouse |
Windows.UI.Core.CoreInputDeviceTypes.pen |
Windows.UI.Core.CoreInputDeviceTypes.touch;
Sample code can be found here: https://github.com/Microsoft/Windows-AppConsult-samples-PWA/tree/master/Canvas
Resources:
Windows 10: Inking and the InkCanvas
InkCanvas Namepace
Progressive Web Apps on Windows