Experimenting with and VML again


The last few days I enjoyed some C++ dev time working on the Firefox plug-in that supports ink.

However, I keep coming back to wanting to inject “ink” using JavaScript somehow. To that end I’ve dabbled with Firefox’s (and Safari’s) <canvas> tag which provides a variety of 2D drawing primitives. However, it doesn’t support the rich line styles (thicknesses particularly) needed for what I want to do. Maybe I’ll have to compromise a bit.

On the IE side, there’s something called VML, which is somewhat similar (or at least can be used to emulate <canvas> functionality), although I haven’t completely figured it out. Actually, it’s not the VML I’m wondering about, but rather the <o:ink> tag (an Office tag I presume) which you’ll notice is generated when you save a Word document with ink in it to an mht file. Does anyone know of a stripped down sample that shows <o:ink> and how to use it? I’m guessing it can be used to display some type of ink object with pressure sensitivity and all. Maybe not. Ideas anyone?


  1. Thanks Julien. Google’s ExplorerCanvas is one of the libraries I was experimenting with.

    One nice about IE’s “canvas” is that line “width” can be expressed as a floating point value. Applying a width to a whole stroke is OK, but it would be nice if there was an existing routine that could render strokes with pressure sensitivity (variable width). I’m wondering if it’s practical to write a JavaScript routine that can segment the stroke sufficiently, apply different stroke widths to these stroke segments, and still produce an overall stroke that looks good and doesn’t render too slowly. I haven’t found a way to do this using canvas and like you suggest I was wondering if it was feasible with ExplorerCanvas. That’s when I wondered if there was a primitive available which renders o:ink that I might be missing. Any ideas?

  2. No problem.

    Rendering the right width:
    I don’t know if javascript even has access to the pressure information…

    Inking in the browser:
    It’d be great to have native support for ink in SVG or canvas, with a flag to turn a surface into an inking surface 😉

    I’ve experimented with javascript and canvas powered ink too [0], but it wasn’t very smooth/fast. It may have been because of the additional calculation for recognizing characters.

    [0] http://blog.monstuff.com/archives/000263.html