How to draw a stroke with pressure sensitive on canvas with html5/javascript? RRS feed

  • Question

  • Hi,

    In c#/xaml, with a tablet supporting pressure sensitive, I can draw smooth strokes using InkCanvas. In html5/javascript, I don't find anything equivalent to InkCanvas. I only find canvas DOM object. With it, only lines with fixed width can be drawn. Do you know how I can draw strokes with pressure sensitive supported? Is there anything I missed?




    Thursday, March 13, 2014 10:46 PM

All replies

  • There is no InkCanvas control (for either HTML or Xaml/C#). In either you can use the InkManager to collect the strokes and then get information about the strokes to render them. See How to render ink data

    The pressure, tilt, etc. are provided on the InkStrokeRenderingSegment class . You can modify the rendering loop from How to render ink data to examine segment.pressure and use that to calculate the width of a given segment.


    Friday, March 14, 2014 3:53 AM
  • Thanks Rob. I will take a look at the samples.

    My scenario is like this: a user recorded some writings on a desktop app which uses InkCanvas control (System.Windows.Controls.InkCanvas). Then he went to a store app and wanted to replay the writings there. Since InkCanvas is not for store API, one way a store app can do is probably the way you mentioned above. Another way I am thinking is, maybe I can still use InkCanvas in c# class library, which is referenced by HTML5/JavaScript win store app. If javascript app have something like swapChainBackgroundPanel, I can replay ink strokes in class library, and then render the result back to UI. Do you think this is even possible?


    Friday, March 14, 2014 9:02 PM
  • Seems to me the InkStrokeRenderingSegment class still draws a segment with fixed width, like the first shape in below graph. However, the result is supposed to be shape started with some width and then ended up a different width, like the second shape. Then a line is of many of these shapes whose width at joint point is determined by pressure. Is there a way to do this?


    Friday, March 14, 2014 9:45 PM
  • Each segment has just one pressure. You can blend the pressures from neighboring segments to get a smoother effect.


    Saturday, March 15, 2014 12:09 AM
  • Tried the pressure value, no luck. Maybe I am missing something, can you help take a look? Pasted code below. I was expecting to see line width changes, but still got a fixed line width. I am using simplified ink sample from http://code.msdn.microsoft.com/windowsapps/Input-simplified-ink-sample-11614bbf

    var pressure = 0;


    function renderStroke(stroke, color, width) { inkContext.strokeStyle = color; inkContext.lineWidth = width; inkContext.beginPath(); // render all rendering segments for the current stroke var first = true; stroke.getRenderingSegments().forEach( function (segment) { if (pressure === 0) { isAdd = true; } else if (pressure === 1.0) { isAdd = false; } var newPressure = isAdd ? pressure + 0.1 : pressure - 0.1; newPressure = newPressure >= 1 ? 1 : newPressure; newPressure = newPressure <= 0 ? 0 : newPressure; pressure = newPressure; segment.pressure = pressure; console.log(pressure); if (first) { inkContext.moveTo(segment.position.x, segment.position.y); first = false; } else { inkContext.bezierCurveTo(segment.bezierControlPoint1.x, segment.bezierControlPoint1.y, segment.bezierControlPoint2.x, segment.bezierControlPoint2.y, segment.position.x, segment.position.y); } } ); inkContext.stroke(); inkContext.closePath(); }


    Monday, March 17, 2014 8:49 PM
  • Seems segment.Pressure is get only. Cannot set. And what's strange is its value is always 0.5, even though the pressure value in PointerPoint object has right value.


    Monday, March 17, 2014 10:42 PM