W3C home > Mailing lists > Public > public-canvas-api@w3.org > October to December 2011

Seeking out more InkML examples

From: Charles Pritchard <chuck@jumis.com>
Date: Thu, 27 Oct 2011 18:32:47 -0700
Message-ID: <4EAA063F.9050909@jumis.com>
To: Richard Schwerdtfeger <schwer@us.ibm.com>, franko@microsoft.com, chuck@jumis.com, jonas@sicking.cc, david.bolter@gmail.com, cyns@exchange.microsoft.com, public-html-a11y@w3.org, jbrewer@w3.org, public-canvas-api@w3.org, Deborah Dahl <dahl@conversational-technologies.com>
On 10/27/11 5:38 PM, Janina Sajka wrote:
> Richard Schwerdtfeger writes:
>> ... Janina please put a link to this
>> document in your canvas agenda for TPAC.
> That will be Monday in our HTML Issues segment at
> 15:30-17:00
> Note also that MMI is joining us immediately following, from 17:00-18:00.
> Among other things, they want to point us to some work on InkML in
> Canvas. Here's an excerpt from an email I received from Debbie Dahl
> about that:
> Date: Fri, 23 Sep 2011 11:00:24 -0400
> From: Deborah Dahl<dahl@conversational-technologies.com>
> As we discussed in the HCG call today, this is a link to the open source
> JavaScript InkML library, which was developed by Tom Underhill at
> Microsoft,
> one of the InkML editors -- http://inkml.codeplex.com/

I'm greatly encouraged by this development in InkML. Until now, I've not 
seen any other uses of InkML in Canvas/SVG.

InkML is one of the primary use cases we have had for using Canvas in 
our own applications. We've found that using a radial gradient mask to 
create a fill pattern for fillRect is more visually pleasing than using 
lineTo commands. It's also far easier to use when pressure sensitivity 
is involved.

For small stroke sizes, fillRect, itself, works quite fine.

With the radial gradient mask we simply go from an opacity of 1 with a 
stop near the edge around .95 and ending the gradient stop with 0. That 
gives us a mask that we then composite onto a solid color (or 
pattern/other fill area).

 From that, we just use fillRect along the path, with close spacing.

This method is quite slow with SVG, as SVG lacks a replicate tag and so 
requires an excess of DOM nodes.
See David Dailey's proposal for a replicate tag:

We have worked with composting nice paths using catmull-rom 
simplification and path outlines, but that's a very different rendering 
technique. It's similar to what is shown in the Word example on codeplex.


Here's what we do in Canvas and SVG -- the basics of a pen stroke, more 
like [MS] Paint or [Adobe] Photoshop than [Adobe] Illustrator or [MS] Word:

<!-- brush -->
<mask id="currentBrushMask" maskContentUnits="objectBoundingBox">
<radialGradient id="currentBrushGrad" cx="50%" cy="50%" fx="50%" 
fy="50%" r="50%">
<stop offset="0%" style="stop-color: white; stop-opacity:1"/>
<stop offset="95%" id="brushHardness" style="stop-color: white; 
stop-opacity:0"/><!-- softness -->
<stop offset="100%" style="stop-color: white; stop-opacity:0"/>
<rect x="0" y="0" width="1" height="1" fill="url(#currentBrushGrad)"/>

<!-- when using the mask for a blue stroke -->
<rect id="brushFill" x="0" y="0" width="1000" height="1000" fill="blue" 


I encourage those participating on this list and/or attending TPAC to 
reply to this thread with any further use cases and/or examples of InkML 
+ SVG/Canvas profiles.

Received on Friday, 28 October 2011 01:33:16 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:31:54 UTC